如何在 HighCharts 中分隔列

Question

我有一个固定宽度和高度的父容器。使用 highcharts 呈现的图形包含在父容器中。有人可以告诉我应该怎么做才能使图表容器可滚动并正确间隔标签和条，以便所有标签都清晰可见并且条间隔很好。请找到 jsfiddle 以便更好地理解 https://jsfiddle.net/z5wqgkm9/

已尝试使用

启用滚动

 scrollbar: {
             enabled: true
            }

但这并没有多大帮助

Answer 1

在父 div 上设置 overflow: scroll 应该可以完成工作。

<div style="width:500px;height:600px; overflow: scroll;">
    <div id="recoranks" style="width: 400%; height: 100%; margin: 0 auto"></div>
</div>

示例：jsfiddle.net/z5wqgkm9/2

Answer 2

这里的问题是 highcharts 使用容器宽度来呈现图表。所以无论你设置什么，它都会符合父容器的宽度和高度。

为了能够使图表在宽度方向或高度方向或两者上更大，并将其保持在带有滚动条的包含框内，您可以利用浮动属性，该属性使元素的位置不符合父母。

这是你必须做的。

首先。在主 div 顶部添加另一个 div 容器 <div style="width:500px;height:600px">

第二。给顶部容器一个 css 类，比如 .main-container，给内部 div 一个 css 类，比如 .inner-container。

因此您的 html 将如下所示

<div class="main-container">
  <div class="inner-container">
    <div id="recoranks" style="min-width: 100%; height: 100%; margin: 0 auto">  </div>
  </div>
</div>

现在。添加以下css类：

.main-container {
  width:500px;
  height:600px;
  overflow-x:scroll;
  overflow-y:hidden;
}

.inner-container {
  width:700px;
  height:580px;
  float:left
}

一切就绪。

我们做了什么。我们用另一个 div 覆盖了图表 div。这个顶部 div 将是具有滚动条的宽度和高度受限的容器。我们给了它我们希望图表容器具有的宽度和高度。我们还要求它隐藏 y 轴上的溢出并使溢出可滚动到 x 轴，因为您的方案只想根据增加的宽度水平滚动以清楚地在图表栏中添加间距。您可以根据需要更改这些溢出设置。

我们对内部图表 div 容器所做的是使其浮动，使其不符合父级的宽度，因为父级认为它没有任何块元素可以在其中添加空间。现在我们为这个浮动容器设置的宽度和高度将有助于控制它将呈现到的实际图表宽度和高度。

使用您的代码以上述解决方案为例：http://codepen.io/Nasir_T/pen/QGbxRw