如何使用Highcharts创建带逐点可变阈值的Variance Chart

我已经通过Highcharts的plotOptions.zones配置实现了固定阈值（100）的areaspline图表：当数值超过阈值时，阈值上方区域显示为绿色；当数值低于阈值时，数值与阈值之间的区域显示为红色。实现代码如下：

const series = ...;
const categories = ...;
const plotOptions = {
  series: {
    threshold: 100,
    zones: [
      {
        value: 100,
        color: 'red'
      },{
        color: 'green'
      }
    ],
    marker: {
      lineWidth: 2,
      lineColor: 'blue'
    }
  }
};
Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    xAxis: {
        categories: categories
    },
    plotOptions: plotOptions,
    series: series
});

但我需要创建一款阈值沿X轴逐点变化的Variance Chart（方差图），尝试了动态生成zones的代码却未达到预期效果（我认为zones需要按阈值递增顺序定义）。请问如何通过Highcharts API配置实现该需求，是否需要进行扩展开发？

尝试的代码如下：

const data = [
  { value: 29.9, threshold: 50 },
  { value: 71.5, threshold: 60 },
  { value: 106.4, threshold: 70 },
  { value: 129.2, threshold: 80 },
  { value: 144.0, threshold: 90 },
  { value: 176.0, threshold: 100 },
  { value: 135.6, threshold: 110 },
  { value: 148.5, threshold: 120 },
  { value: 216.4, threshold: 130 },
  { value: 194.1, threshold: 140 },
  { value: 95.6, threshold: 150 },
  { value: 54.4, threshold: 160 }
];
const series = [{
  data: data.map(obj => obj.value)
}];
const plotOptions = createPlotOptions(data);
// Update the thresholds dynamically
function createPlotOptions(data) {
  return {
    areaspline: {
      zones: data.map(function(d) {
        return {
          value: d.threshold,
          color: (d.value < d.threshold) ? 'red' : 'green'
        };
      })
    }
  };
}
Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    xAxis: {
        categories: categories
    },
    plotOptions: plotOptions,
    series: series
});

内容的提问来源于stack exchange，提问作者beeThree