javascript - 如何在固定宽度且带有水平滚动条的容器中放置 highcharts 图表？

Question

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

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

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

我说了很多，但我希望一切都清楚。

Answer 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 进行旧版支持