范围选择器更改时的 Highstock 更改刻度间隔

Question

我无法在以下 Jsfiddle 中更新 tickinterval：https://jsfiddle.net/rarwarrar/5xgoqjst/4/

目前是这样的：

   xAxis: {
    events: {
    setExtremes: function(e) {
      if (e.rangeSelectorButton.text === "2Hour") {
         $('#chart').highcharts().xAxis[0].tickInterval= 2700000 //45 min
         $('#chart').highcharts().redraw()
       }
    }
    }
   },

不工作。

例如，单击“2 小时”后是否可以将滴答间隔设置为每 45 分钟一次？

Answer 1

可以，但是如果文本显示为“2 小时”但实际时间为 45 分钟，那会让人感到困惑。为什么不为此添加新按钮？为了显示这一点，需要有最少的点数，但您可以使用 allButtonsEnabled 覆盖。这是您的 rangeSelector 的样子：

   rangeSelector: {
         allButtonsEnabled: true,
     buttons: [{
       type: 'hour',
       count: 2,
       text: '2Hour'
     }, {
       type: 'hour',
       count: 5,
       text: 'Week'
     }, {
       type: 'day',
       count: 1,
       text: '2Weeks'
     }, {
       type: 'minute',
       count: 45,
       text: '45 minutes'
     }],
     selected: 1,
     inputEnabled: false,
     buttonPosition: {
       x: 340
     },
     buttonSpacing: 10
   }

这是它的直播demo。

Answer 2

您可以在设置极值后使用 tickPositioner 函数更改刻度位置。您可以使用 Axis.update() 更新此轴的 tickPositions：

   setExtremes: function(e) {
     if (e.rangeSelectorButton.text === "2Hour") {
       this.update({
         tickPositioner: function() {
           var positions = [],
             info = this.tickPositions.info;
           for (var x = this.dataMin; x <= this.dataMax; x += 45 * 60 * 1000) {
             positions.push(x);
           };
           positions.info = info;
           return positions;
         }
       }, false)
     }
   }

您可以在此处查看其工作原理示例： https://jsfiddle.net/5xgoqjst/5/

您应该也可以在不同的范围内更改您的 tickPositions。

此致。

Answer 3

也许这可以帮助某人，我更新了现有的 Fiddle ;-)

xAxis: {
  events: {
    setExtremes: function(e) {
      if (typeof(e.rangeSelectorButton) !== 'undefined') {
       // alert('count: ' + e.rangeSelectorButton.count + 'text: ' + e.rangeSelectorButton.text + ' type: ' + e.rangeSelectorButton.type);
        if (e.rangeSelectorButton.type === "week") {
          this.update({              
            tickInterval: 86400000, //1000*60*60*24 = 1 day
            minorTickInterval: 86400000
          }, false)
        }
      }
    }
  }
}

那么你当然得根据你的情况进行调整。

范围选择器更改时的 Highstock 更改刻度间隔

Highstock Change tick interval on range selector change

javascript

jquery

highcharts

highstock