Highcharts - Highstock: fixed width intervals with scrollbar

问题

I need the points of my chart to have a fixed width (say, 100px each). If the needed space exceed the width of the chart, I just want to be able to scroll horizontally (with the scrollbar.enabled parameter set to true).

This is the basic setup, without setting the points width:

http://jsfiddle.net/wxxdne19/

If I set the column width like this:

http://jsfiddle.net/wxxdne19/1/

The tickPixelInterval parameter is ignored (as the documentation says, of course).

I tried a bunch of other things, but none of them worked, and I ran out of ideas. How can I do what I need?

Update

To clarify what I need, think of it as if I have a column chart, and I need to force all the columns to have a fixed width. Something like this:

http://jsfiddle.net/4rx4snjh/

But, instead of the columns overlapping each other, I'd like the scrollbar to do its job :-) Furthermore, I need it to work with any kind of series (lines, areas...), not just columns.

回答1:

It seems that the solution here is to compute extremes manually and set them in load event:

  load: function() {

    var chart = this,
      xAxis = this.xAxis[0],
      visibleColumns = (xAxis.width - pointWidth) / pointWidth;

    xAxis.setExtremes(pointStart, pointStart + pointInterval * visibleColumns);

  }

Live demo: http://jsfiddle.net/kkulig/mpancrbc/

For some reason (bug probably) xAxis.min value must be initialized when the container width is a small value (in my example it's less that 400 px or so).

API reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

来源：https://stackoverflow.com/questions/47726634/highcharts-highstock-fixed-width-intervals-with-scrollbar

标签

Highcharts

highstock