Question

highcharts组织结构图出现问题。问题在于，该图表将很大，我需要水平滚动条来容纳图表容器，或者使图表水平滚动。

我试图使用css启用图表的滚动条或使图表的容器可滚动，但是没有运气，高图表试图将图表适合窗口大小，这在这种情况下是不可接受的。

尝试使用下面的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/

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

任何帮助将不胜感激！

Answer 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

HighCharts Orgcharts使可滚动容器

1 个答案: