如何构建如上所示的高图？

Question

有人可以告诉我他们是否曾经创建过这样的 Highcharts 图表吗？您有演示吗？可以与我分享吗？我在创建像此图中这样的图表时遇到困难

我正在构建一个与图中类似的图表，现在我正在使用 highchartjs

图表图像

Answer 1

是的，这是可能的。

为此，我们需要将图表分为 5 个部分。图表的每一部分都会有一个 y 轴和一个系列。

为了获得这种效果，我们需要将所有 yAxes 的宽度设置为 20%，然后每个后续轴应再移动 20%。我们将使用 left 属性来完成此操作。所以，第一个 yAxis: left: 0%，width: 20%，第二个 yAxis: left: 20%，width: 20%，依此类推。

API参考：

https://api.highcharts.com/highcharts/yAxis.left

https://api.highcharts.com/highcharts/yAxis.width

演示：

https://jsfiddle.net/BlackLabel/x1b320nt/

yAxis: [{
 width: '20%',
 visible: false,
}, {
 left: '20%',
 visible: false,
 width: '20%'
}, {
 left: '40%',
 visible: false,
 width: '20%'
}, [...]]