如何在具有固定宽度和水平滚动条的容器中具有高图表图表

How to have a highcharts chart in a container of a fixed width, and with a horizontal scrollbar?

本文关键字：高图表 水平 固定宽度 滚动条      更新时间：2023-09-26

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

我

不希望容器宽度改变 coz，然后我将不得不更改页面的宽度以适应（更改一般布局），我这样做了，它看起来不太好。

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

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

在

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

JSFIDDLE 示例

<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获得旧版支持

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

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

相关文章：