是否可以用颜色区分以表示速度频率到 Highcharts 的面积图中？

Question

如何在“highcharts-react-official”的面积图中显示数据以三种不同颜色和线性渐变表示高、中、低范围的值？

我在柱形图中实现了速度和计数来表示速度频率，其中红色表示0-20和101-120范围内的速度，黄色表示21-40和81-99范围内的速度，绿色表示速度在 41-80 范围内。

在这里，我所期望的是，我必须在面积图中表示这个场景。我该怎么办？

Answer 1

要演示一系列颜色，最好使用“区域”。您可以通过将 zoneAxis 属性设置为“x”或“y”来选择是垂直还是水平显示它们。

示例数据：

Highcharts.chart('container', {
  series: [{
    type: 'areaspline',
    data: [50, 70, 100, 115],
    zoneAxis: 'y',
    zones: [{
        value: 20,
        color: '#ffff00',
      },
      {
        value: 40,
        color: '#ffff00',
      },
      {
        value: 80,
        color: '#00ff00',
      },
      {
        value: 99,
        color: '#ffff00',
      },
      {
        value: 120,
        color: '#ff6968', // Red color for the line
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, "rgba(255, 105, 104, 0.3)"], // Lighter red gradient start
            [0.1, "rgba(255, 105, 104, 0)"], // Transparent at the bottom
          ],
        },
      }
    ]
  }]
});

演示： https://jsfiddle.net/BlackLabel/hms9uwge/

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