Only 3 steps on xAxis with type xAxis in Highcharts

问题

Is there a way to get only three steps on the xAxis, one at start, one in the middle and one in the end. I've played around with xAxis.labels.steps but I couldn't get an reliable result.

Note the xAxis type is datetime.

回答1:

There is at least three ways to achieve that (which are automatically):

Use tickPositioner (the best IMHO): you have full access to decide where tick should be set (for example: [min, average, max]).
Use tickPixelInterval: useful only when you have fixed width of the chart, and when interval will be multiple of ncie numbers (like 0 - 1 - 2, or 100 - 200 - 300)
Use tickInterval: useful only when you know range of xAxis, for example 0-10, so you can set tickInterval: 5

And jsfFiddle with compare: http://jsfiddle.net/FQ68Y/3/

回答2:

You can do this with the tickPositions option or the tickPositioner function:

http://api.highcharts.com/highcharts#xAxis.tickPositioner

tickPositions: [0, 1, 2]

or something like:

 tickPositioner: function () {
            var positions = [],
                tick = Math.floor(this.dataMin),
                increment = Math.ceil((this.dataMax - this.dataMin) / 2);

            for (; tick - increment <= this.dataMax; tick += increment) {
                positions.push(tick);
            }
            return positions;
        }

回答3:

As the other answers mention there is the tickPositioner field. For some reason it dont work out of the box. I had to add an info property to the returning array to get the xAxis to display formatted dates instead of just the milliseconds, as found in this fiddle.

tickPositioner: function (min, max) {
  var ticks = [min, min + (max - min) / 2, max];
  ticks.info = {
    unitName: 'hour',
    higherRanks: {}
  };
  return ticks;
}

来源：https://stackoverflow.com/questions/19809531/only-3-steps-on-xaxis-with-type-xaxis-in-highcharts

标签

Highcharts