如何在highcharts-react-official面积图中用渐变颜色区分速度频率区间？

核心实现思路 #

通过Highcharts的colorAxis定义数值区间与颜色的映射关系，结合面积图的线性渐变填充配置，实现对应区间的三色渐变效果。以下是针对你需求的具体实现步骤：

代码示例 #

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const SpeedAreaChart = () => {
  // 速度区间对应的颜色配置
  const speedColorStops = [
    // 红色区间：0-20
    [0, '#ff4444'],
    [20 / 120, '#ff4444'],
    // 黄色区间：21-40
    [20 / 120, '#ffdd44'],
    [40 / 120, '#ffdd44'],
    // 绿色区间：41-80
    [40 / 120, '#44dd44'],
    [80 / 120, '#44dd44'],
    // 黄色区间：81-99
    [80 / 120, '#ffdd44'],
    [99 / 120, '#ffdd44'],
    // 红色区间：101-120（99-101区间直接过渡为红色）
    [99 / 120, '#ff4444'],
    [101 / 120, '#ff4444'],
    [1, '#ff4444']
  ];

  const chartOptions = {
    chart: { type: 'area' },
    title: { text: '速度频率分布' },
    xAxis: {
      // 若x轴为连续速度值，可改为type: 'linear'，data用二维数组[[x, y], ...]
      categories: ['0-20', '21-40', '41-80', '81-99', '101-120'],
      title: { text: '速度区间' }
    },
    yAxis: {
      min: 0,
      max: 120,
      title: { text: '速度' }
    },
    colorAxis: {
      min: 0,
      max: 120,
      stops: speedColorStops
    },
    series: [{
      name: '计数',
      data: [18, 25, 50, 30, 15], // 对应各区间的计数数据
      fillColor: {
        // 垂直方向渐变，y轴数值对应渐变颜色位置
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: speedColorStops
      },
      colorByPoint: false,
      marker: { enabled: false } // 隐藏数据点标记，优化面积图视觉效果
    }]
  };

  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

export default SpeedAreaChart;

关键配置说明 #

1. 颜色断点定义：speedColorStops数组按数值占最大值（120）的比例设置颜色断点，确保0-20、101-120区间为红色，21-40、81-99为黄色，41-80为绿色。
2. 线性渐变方向：linearGradient设置为垂直方向（x1:0,y1:0,x2:0,y2:1），使y轴方向的数值对应渐变颜色，匹配“高、中、低数值区间”的颜色映射需求。
3. 动态适配：若速度最大值不固定，可通过变量动态计算比例（例如const maxSpeed = 120;，然后用20/maxSpeed替代固定比例）。
4. 连续数据适配：如果x轴是连续的速度值而非区间分类，只需将xAxis.type改为'linear'，series.data改为[[速度值, 计数], ...]即可实现平滑的渐变填充。

内容的提问来源于stack exchange，提问作者Mariraja Selvakumar