时间戳

首页 > 解决方案 > HighCharts Orgcharts 可滚动容器

javascript - HighCharts Orgcharts 可滚动容器

问题描述

我对 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/

所以问题是 - 有没有办法让图表水平滚动并获得漂亮的视图，而不会使节点变得如此之小，就像我提供的小提琴一样。

任何帮助将不胜感激 ！

标签： javascripthighchartsorgchart

解决方案

该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

推荐阅读