Highstock Change tick interval on range selector change

问题

I am unable to get the tickinterval to update in the following Jsfiddle: https://jsfiddle.net/rarwarrar/5xgoqjst/4/

Currently this:

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

Is not working.

For instance can the tick interval be set to every 45 minutes once '2hour' is clicked?

回答1:

You can use tickPositioner function for changing your tick positions after you set your extremes. You can use Axis.update() for updating tickPositions of this axis:

   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)
     }
   }

Here you can see an example how it can work: https://jsfiddle.net/5xgoqjst/5/

You should be able to change your tickPositions on different ranges as well.

Best regards.

回答2:

You can, but that would be confusing to have text read "2hour" but actual time be 45 minutes. Why not add new button for this? In order for this to show there needs to be a minimum number of points but you can override with allButtonsEnabled. Here is what your rangeSelector could look like:

   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
   }

And here is a live demo of it.

回答3:

Maybe this could help someone, I updated an existing 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)
        }
      }
    }
  }
}

Then you will have to adapt it to your case of course.

来源：https://stackoverflow.com/questions/39104317/highstock-change-tick-interval-on-range-selector-change

标签

javascript

jquery

Highcharts

highstock