javascript - 如何更改 Highcharts 中的区域线颜色

Question

如果折线图上的某个点低于目标，我试图将通向该点的线设置为“红色”，而不是相反(直到到达该点为止为绿色)。见下图:

所以我想说的是，Mar-19 点是绿色的，但从 mar-19 到 apr-19 的线应该是红色。从 apr-19 到 May-19 的线路应该是绿色的。 5月-19日到6月的线路应该是红色的等等......

这是我用来生成系列和区域的 json:

这是图表的代码(reactjs):

const options = {
      chart: {
        height: 280
      },
      title: {
        text: null
      },

      subtitle: {
        text: null
      },

      xAxis: settings.xAxis,

      yAxis: {
        title: {
          text: null
        },
        labels: {
          formatter: function() {
            let value = '';
            switch (settings.value_type) {
              case 'Percentage':
                value = `${this.value + '%'}`;
                break;
              case 'Numeric':
                value = `${this.value}`;
                break;
              case 'Currency':
                value = `${'$' + this.value}`;
                break;
              default:
                value = '';
                break;
            }
            return value;
          }
        },
        min: 0
      },

      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        enabled: false
      },

      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 0
        }
      },

      series: series,
      responsive: {
        rules: [
          {
            condition: {
              maxWidth: 500
            },
            chartOptions: {
              legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
              }
            }
          }
        ]
      },
      exporting: { enabled: false },
      credits: { enabled: false }
    };

Answer 1

要使标记点采用前一个区域的颜色，您可以在每个 value 属性的小数点后添加一个小值:

series: [{
    data: [23, 42, 52, 47, 64],
    zoneAxis: 'x',
    zones: [{
        value: 1.00001,
        color: 'green'
    }, {
        value: 2.00001,
        color: 'red'
    }, {
        value: 3.00001,
        color: 'green'
    }, {
        color: 'red'
    }]
}]

现场演示: http://jsfiddle.net/BlackLabel/8ga2ce4j/

API引用: https://api.highcharts.com/highcharts/series.line.zones.value