如何在 HighCharts 中 space 列

Question

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

已尝试使用

启用滚动

 scrollbar: {
             enabled: true
            }

但这并没有多大帮助

Answer 1

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

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

这是您必须做的。

首先。在主 div <div style="width:500px;height:600px">

之上添加另一个 div 容器

其次。给顶部容器一个 css class 的 say .main-container 并给内部 div 一个 css class 的 say .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 classes:

.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 容器所做的是使其浮动，以便它不符合父级的宽度，因为父级认为它没有任何要添加的块元素 space 在里面。现在我们为这个浮动容器设置的宽度和高度将有助于控制它将渲染到的实际图表宽度和高度。

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

Answer 2

在父 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

如何在 HighCharts 中 space 列

How to space columns in HighCharts

html

css

jquery

highcharts

highstock