Question

如果点低于目标，我试图将线指向折线图上的点“红色”，而不是相反（绿色直到到达该点）。参见下图：

所以我要说的是3月19日的点正确是绿色，但是3月19日到4月19日的线应该是红色。从4月19日到5月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

如何在高图中更改区域线颜色

1 个答案: