样条图highchart以系列填充颜色

Question

我已经在 jsfiddle

中创建了一张图表

Highcharts.chart('container', {
  chart: {
    type: 'areaspline',


  },
  title: {
    text: 'Soverign Capped 1 year PD',
    align: 'left',
    backgroundColor: 'gray',
    style: {

      fontSize: "12px",

    }
  },
  subtitle: {
    text: '30 days moving average',
    align: 'left',
    style: {
      color: 'gray',
      fontSize: "8px",


    }
  },


  xAxis: {
    categories: [
      '10/11/2019',
      '11/11/2019',
      '12/11/2019',
      '1/11/2020',
      '2/11/2020',
      '3/11/2020',
      '4/11/2020'

    ],
    min: 0.5,
    max: 5.5,
    startOnTick: false,
    endOnTick: false

  },
  yAxis: {
    title: {
      text: 'PD%',
      align: 'high',
      fontWeight: 'bold'
    },



    max: 25,
    startOnTick: false,
    endOnTick: false
  },
  tooltip: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    series: {
      marker: {
        enabled: false
      },
      states: {
        inactive: {
          opacity: 1
        }
      },
      dataLabels: {
        enabled: true,
        inside: true,
        style: {
          fontWeight: "bold",
        },
        formatter: function() {
          if (this.x == "4/11/2020") {
            return this.series.name;
          }
        }

      }

    },
    enableMouseTracking: false,
    tooltip: {
      enabled: false
    },
    areaspline: {
      fillOpacity: 1,
    },


  },

  series: [{
      color: '#fbb189',
      name: 'Deitrioting',
      showInLegend: false,
      data: [25, 25, 25, 25, 25, 25, 25]
    },
    {
      color: '#fff2d0',
      name: 'Stable',
      showInLegend: false,
      data: [3, 4, 5, 5, 4, 10, 10]


    }, {
      color: '#c2e0b7',
      name: 'Improving',
      showInLegend: false,
      data: [1, 3, 4, 3, 3, 5, 7]
    },
    {
      name: '',
      showInLegend: false,
      type: 'spline',
      data: [7.0, 6.9, 9.5, 12, 23, 4, 3]
    }
  ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

目前，我已经为不同的系列定义了不同的颜色。但是对于最后一个日期，我想为所有系列设置红色。

你能帮我解决这个问题吗？

下面附上示例图片。

Answer 1

您可以使用区域：

plotOptions: {
  ...,
  areaspline: {
    ...,
    zones: [{
      value: 5.5
    }, {
      color: 'red',
      value: 6.5
    }],
  },
}

现场演示： https://jsfiddle.net/BlackLabel/m4u5zt8g/

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

样条图highchart以系列填充颜色

spline chart highchart to fill the color in series

javascript

jquery

spline

highcharts