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;
}

注意：IE8及更低版本不支持overflow-x / overflow-y，请使用overflow获取旧版支持

Answer 2

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

参见简单示例：http://jsfiddle.net/highcharts/fj6d2/

如何在固定宽度的容器中使用高级图表，并使用水平滚动条？

2 个答案: