如何在固定宽度和水平滚动条的容器中制作高图表？答案

【问题标题】：How to have a highcharts chart in a container of a fixed width, and with a horizontal scrollbar?如何在固定宽度和水平滚动条的容器中制作高图表？
【发布时间】：2013-10-31 19:38:49
【问题描述】：

我的图表的大小（x 轴上的点数）变化很大。因此，当点太多时，标签会混合/重叠。我想动态改变图表的宽度。

我不想改变容器的宽度，因为我必须改变页面的宽度以适应（改变总体布局），但看起来不太好。

相反，我想保持容器的相同宽度，但要有一个水平滚动条，使我能够导航图表（其宽度是动态确定的）。

我说了很多，但我希望它很清楚。

【问题讨论】：

你试过什么？什么不起作用？...您能否提供代码示例、屏幕截图或 jsfiddle 来帮助我们帮助您？
我尝试了stackoverflow.com/questions/258372/… 中的建议，但无法成功。但是 MikeM 给出的建议是有效的。谢谢。

标签： javascript html css highcharts scroll

【解决方案1】：

在容器元素上使用overflow（或overflow-x）为该容器提供水平滚动。

jsfiddle example

<div id="container">
    <div id="chart"></div>
</div>

#container {
    margin: 40px;
    overflow-x: scroll;
}
#chart {
    background: gray url(//placehold.it/3000x300&text=Some+Chart);
    height: 300px;
    width: 3000px;
}

注意：overflow-x/overflow-y 在 IE8 及以下版本中不支持，请使用 overflow 以获得旧版支持

【讨论】：

【解决方案2】：

在 highcharts 中，您可以使用 highstock.js 并启用 scrollbar，包括定义最小值/最大值。

查看简单示例：http://jsfiddle.net/highcharts/fj6d2/

【讨论】：

这样会容易得多。但是，我注意到 y 轴值会根据您滚动的位置增加和减少（这不是预期的行为）。你知道我能不能禁用它吗？
我怎样才能重现这个？我应该做哪些步骤
我的意思是在您上面提供的 jsfiddle 示例中。如果向右滚动，您可以看到 y 轴标签发生变化（最大值从 200 变为 250）。你能禁用这个吗？
你需要使用tickPositioner / tickPositions。