React HighChart，为每个数据集应用不同的渐变颜色

Question

我有一个高图表，我想在每个数据集的图表线下方应用渐变。 每个数据集的线条颜色都不同，但似乎不可能为每个数据集应用渐变颜色。

我不能为图表的每个series应用areaSpline ：

 c.series?.forEach((s, index) => {
    s.type = 'areaspline';
    s.color = colors.spline[index];
  });

  c.chart = { type: 'areaspline' };
  c.plotOptions = {
    series: {
      stacking: isStacked ? 'normal' : undefined,
      connectNulls: true,
      marker: {
        enabled: false,
        radius: 14,
      },
    },
    areaspline: {
      // fillOpacity: 0.5,
      fillColor: {
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
          [0, 'red'],
          [1, 'transparent'],
        ],
      },
    },
  };

关于如何实现这一目标的任何想法？

Answer 1

您需要为每个系列定义渐变，而不是在plotOptions中。 例如：

  series: [{
    ...,
    fillColor: {
      linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
      stops: [
        [0, 'blue'],
        [1, 'transparent'],
      ]
    }
  }, {
    ...,
    fillColor: {
      linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
      stops: [
        [0, 'red'],
        [1, 'transparent'],
      ]
    }
  }]

---

现场演示： http://jsfiddle.net/BlackLabel/kczgb4Lv/

API 参考： https://api.highcharts.com/highcharts/series.areaspline.fillColor