如何沿着折线图中的每个点创建Highcharts绘图带

Question

我想创建一个具有HighCharts的折线图，该折线图的每个点都有一个绘图带。就像这样：https://i.stack.imgur.com/H10ad.jpg(他们也在使用HighCharts，所以这一定是可能的(。

然而，我似乎无法为每一个特定的点获得它。每当我添加绘图带时，它只会使用最高点和最低点绘制一个带，如下所示：https://i.stack.imgur.com/rwHdT.jpg

我当前如何渲染图表(注意绘图带部分(：

Highcharts.chart('chart', {
chart: {
type: 'line',
},
title: {
text: `${this.variable}`,
},
credits: {
enabled: false,
},
xAxis: {
type: 'category',
title: {
text: "Date"
},
},
yAxis: {
title: {
text: this.unit
},
plotBands: [
{
color: "orange",
from: 12,
to: 14
},
{
color: "orange",
from: 10,
to: 13
} // and so on.
]
},
tooltip: {
headerFormat: `<div>Date: {point.key}</div>`,
pointFormat: `<div>${this.unit}: {point.y}</div>`,
useHTML: true,
},
series: seriesList,
} as any);

因此，确切的例子是沿着整个折线图绘制从10到14的绘图带，而不是绘制到不同的点：一个从12到14，一个从10到13。

关于我如何才能做到这一点，有什么想法吗？我看到了一些带有"路径"的东西，但我找不到任何关于它的信息。

提前谢谢。

Answer 1

在这种情况下，应该使用arearange系列而不是plotBand。

演示：https://www.highcharts.com/demo/arearange-line

API参考：https://api.highcharts.com/highcharts/series.arearange