HighCharts Orgcharts 可滚动容器答案

【问题标题】：HighCharts Orgcharts make scroll able containerHighCharts Orgcharts 可滚动容器
【发布时间】：2019-05-27 09:39:02
【问题描述】：

我对 highcharts 组织结构图有疑问。问题是，这个图表会很大，我需要水平滚动条作为图表容器，或者让图表水平滚动。

我曾尝试使用 css 启用图表滚动条或使图表容器可滚动，但没有运气，highcharts 试图将图表适应窗口大小，这对于这种情况是不可接受的。

尝试使用下面的js代码启用滚动条

scrollbar: {
    enabled:true,
    barBackgroundColor: 'gray',
    barBorderRadius: 7,
    barBorderWidth: 0,
    buttonBackgroundColor: 'gray',
    buttonBorderWidth: 0,
    buttonArrowColor: 'yellow',
    buttonBorderRadius: 7,
    rifleColor: 'yellow',
    trackBackgroundColor: 'white',
    trackBorderWidth: 1,
    trackBorderColor: 'silver',
    trackBorderRadius: 7
},

并通过 css 使用容器样式

<style>
#container {
    min-width: 300px;
    margin: 1em auto;
    border: 1px solid silver;
    overflow: scroll !important;
}

#container h4 {
    text-transform: none;
    font-size: 14px;
    font-weight: normal;
}
#container p {
    font-size: 13px;
    line-height: 16px;
}
</style>

结果可以在下面提供的小提琴中查看

https://jsfiddle.net/72v36msx/

所以问题是 - 有什么方法可以使图表水平滚动并获得漂亮的视图，而不会像我提供的那样使节点变得如此之小。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript highcharts orgchart

【解决方案1】：

scrollbar 功能仅适用于 Highstock。要创建自定义滚动条，请将 chart.width 设置为高于容器宽度的值。

CSS：

#container {
    min-width: 300px;
    overflow: scroll !important;
}

JS：

chart: {
    width: 1200,
    ...
}

现场演示： https://jsfiddle.net/BlackLabel/5hpk3e9d/

API 参考： https://api.highcharts.com/highcharts/chart.width

【讨论】：