HighCharts基於時間的季度數據 - xAxis標籤問題

我們在我們的網站上顯示動態數據。用戶可以選擇不同類型的時間段，如每月，每季度，每年，每年等。我們的問題是試圖在xAxis上清楚地顯示季度數據。我們可以使用格式化工具正確顯示工具提示爲「2008年第一季度」。我們希望xAxis做類似的事情。我們部分在那裏，但我認爲我在這裏做了一些胖手指的錯誤。示例是jsFiddle。HighCharts基於時間的季度數據 - xAxis標籤問題

我們試圖與之合作的代碼是在X軸標籤[formatter][2]：

xAxis: { 
      alternateGridColor: '#FAFAFA', 
      labels: { 
       style: { 
        fontSize: '9px', 
        width: '175px' 
       }, 
       formatter: function() { 
        var s; 
        if (Highcharts.dateFormat('%b', this.value) == 'Jan') { 
         s = s + "Q1" 
        }; 
        if (Highcharts.dateFormat('%b', this.value) == 'Apr') { 
         s = s + "Q2" 
        }; 
        if (Highcharts.dateFormat('%b', this.value) == 'Jul') { 
         s = s + "Q3" 
        }; 
        if (Highcharts.dateFormat('%b', this.value) == 'Oct') { 
         s = s + "Q4" 
        }; 
        s = s + " " + Highcharts.dateFormat('%Y', this.value); 
        return s; 
       } 
      }, 
      tickInterval: 31536000000, 
      type: 'datetime' 
     }

這是利用X軸的日期時間類型，並在HighCharts運行。如果我將tickInterval更改爲3個月（259200000），它會變成梨形。我們期望的結果是，X軸有條目，如： 2007年第一季度 2007年第二季度 2007年第三季度 2007年第四季度 .. 2012年第四季度

來源

2013-05-14 wergeld

您可以設置tickInterval三個月

http://jsfiddle.net/yHmrZ/5/

tickInterval: 3 * 30 * 24 * 3600 * 1000,

但是，當你想動態變化範圍，你應該使用tickPostitioner

來源

2013-05-14 13:42:23

這似乎是個竅門。胖手指確實錯了。我的間隔時間設定爲年度。 – wergeld 2013-05-14 13:53:49

您可以使用自己的tickPositioner總，一起來看看：http://jsfiddle.net/yHmrZ/4/

而對於tickPositioner和格式化代碼：

 labels: { 
      formatter: function() { 
       var s = "", 
        d = new Date(this.value), 
        q = Math.floor((d.getMonth() + 3)/3); //get quarter 
       s = "Q" + q + " " + d.getFullYear(); 
       return s; 
      } 
     }, 
     tickPositioner: function(min, max){ 
      var axis = this.axis, 
       act = min, 
       ticks = []; 
      while(act < max){ 
       ticks.push(act); 
       act = act + (90 * 24 * 3600 * 1000); //three months 
      } 
      return ticks; 
     },

來源

2013-05-14 13:39:49

這似乎是工作，直到你看到更大的時間尺度。勾號位置似乎向左移動了一下。以http://jsfiddle.net/wergeld/5uJCa/爲例。此外，xAxis標籤與工具提示時間值不匹配。 – wergeld 2013-05-14 13:48:50

HighCharts基於時間的季度數據 - xAxis標籤問題

回答

相關問題