高图集-根据自定义点更改区域颜色

Question

我有这样的数据：

data: [
     {x:Date.UTC(2022,9,25,00,10),y:23,ps:"HCE"},
     {x:Date.UTC(2022,9,25,00,20),y:24,ps:"HPE"},
     {x:Date.UTC(2022,9,25,00,30),y:23,ps:"HCH"},
     {x:Date.UTC(2022,9,25,00,40),y:24,ps:"HCH"}
]

用这个，我得到了一个单色的线条图。我想做的是创建以下区域：

zones: [
    {value: 'HCE', color: 'red'},
    {value: 'HPE', color: 'blue'},
    {value: 'HCH', color: 'green'}
]

但是，我找不到一种方法来得到"ps“点的值来改变我的曲线的颜色。有办法绕道吗？

提前谢谢。

Answer 1

这在这种形式中是不可能的，因为区域需要将zones.value与轴上的值相关联(取决于区域类型- xAxis或yAxis)。总之，zones.value总是需要在轴上进行真实的反射，所以不可能是随机数。

我创建了两个解决方案的例子：

使用multicolor_series插件：

演示： https://jsfiddle.net/BlackLabel/tr3f4gqh/

参考： https://blacklabel.github.io/multicolor_series/

通过使用在point.x事件上更新的point.x来模拟字符串值：

演示： https://jsfiddle.net/BlackLabel/fthwv85r/

API参考： https://api.highcharts.com/highcharts/chart.events.load https://api.highcharts.com/highcharts/series.line.zoneAxis