Highcharts - Highstock：带滚动条的固定宽度间隔 [英] Highcharts - Highstock: fixed width intervals with scrollbar

问题描述

我需要我的图表中的点具有固定宽度（例如，每个100px）。如果所需的空间超过图表的宽度，我只想水平滚动（将 scrollbar.enabled 参数设置为 true ）。

这是基本的设置，没有设定点宽：

http://jsfiddle.net/wxxdne19/

如果我这样设置列宽：

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

tickPixelInterval 参数会被忽略（当然，文档）。

我尝试了一堆其他的东西，但没有一个能够工作，并且我用完了想法。我怎么做我需要的？

更新

为了澄清我需要的东西，我有一个柱形图，我需要强制所有的列具有固定的宽度。像这样：

http://jsfiddle.net/ 4rx4snjh /

但是，我不希望这些列互相重叠，而是希望滚动条能够完成它的工作:-)此外，我需要它使用任何类型的系列（行，区域...），而不仅仅是列。

解决方案

似乎这里的解决方案是手动计算极值并将它们设置在 load 事件中：

  load ：function（）{
 
 var chart = this，
 xAxis = this.xAxis [0]，
 visibleColumns =（xAxis.width  -  pointWidth）/ pointWidth; 
 
 xAxis.setExtremes（pointStart，pointStart + pointInterval * visibleColumns）; 
 
 $ b  

现场演示： http://jsfiddle.net/kkulig/mpancrbc/

出于某种原因（错误可能） xAxis.min 值必须在容器宽度为小值时初始化（在我的示例中，它小于400 px左右）。

---

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

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.

解决方案

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

这篇关于Highcharts - Highstock：带滚动条的固定宽度间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！