使用highcharts在季度图表上放大时显示特定月份

Question

我正在寻找一种方法来揭示areapline图表中特定季度之间的月份。

缩小时的视图：

在这里放大：

我想做的是每当用户放大图表时，显示1月至14月和4月14日之间的月份（以及其他月份）。

兴趣点：

xAxis: { type: 'datetime', tickInterval: 3 * 30 * 24 * 3600 * 1000 }

series: [{ name: 'X', data: [ [Date.UTC(2014,0,1), randomNumber()], [Date.UTC(2014,1,1), randomNumber()], [Date.UTC(2014,2,1), randomNumber()], [Date.UTC(2014,3,1), randomNumber()], [Date.UTC(2014,4,1), randomNumber()], [Date.UTC(2014,5,1), randomNumber()], [Date.UTC(2014,6,1), randomNumber()], [Date.UTC(2014,7,1), randomNumber()], [Date.UTC(2014,8,1), randomNumber()], [Date.UTC(2014,9,1), randomNumber()], [Date.UTC(2014,10,1), randomNumber()], [Date.UTC(2014,11,1), randomNumber()], [Date.UTC(2014,12,1), randomNumber()] ] }]

这是我到目前为止得到的代码： http://codepen.io/DavidVII/pen/cjdLf?editors=001

谢谢！

Answer 1

您需要使用tickPositioner，它允许为动态刻度准备功能。在函数体中，您可以将dataMin / dataMax与min / max进行比较，您将知道图表是否被缩放。

Answer 2

好的，在阅读完他们的文档后，我发现tickInterval和afterSetExtream是我放大后从季度视图到月视图所需要的。

这是一个代码示例：

xAxis: {
  type: 'datetime',
  tickInterval: 3 * 30 * 24 * 3600 * 1000,
  events: {
    afterSetExtremes: function(event){
      if (event.max < this.getExtremes().dataMax || event.min > this.getExtremes().dataMin) {
        this.update({
          tickInterval: 1 * 30 * 24 * 3600 * 1000
        });
      } else {
        this.update({
          tickInterval: 3 * 30 * 24 * 3600 * 1000
        });
      }
    }
  }

这是一个非常简单的工作示例： http://codepen.io/DavidVII/full/cjdLf/

如果你感兴趣的话，这里的代码就完整了： http://codepen.io/DavidVII/pen/cjdLf/