如何使用Ant Design Charts实现带95%置信区间填充的多折线面积图

你当前使用的单Line组件默认配置无法直接实现跨系列的置信区间面积填充，可根据场景选择以下两种方案实现：

方案一：数据转宽表+组合图实现（推荐，性能更高） #

适合数据量较大的场景，渲染效率更高，配置逻辑更清晰。

步骤1：长表转宽表 #

将你当前按category拆分的长表结构，转换为每个日期对应一条数据的宽表结构：

const processedData = Object.values(
  data.reduce((acc, cur) => {
    if (!acc[cur.date]) acc[cur.date] = { date: cur.date };
    acc[cur.date][cur.category] = cur.value;
    return acc;
  }, {})
);

步骤2：组合图渲染 #

通过Chart容器同时加载置信区间填充层和三条折线：

import { Chart, Line, Area } from '@ant-design/charts';

const Graph = () => {
  const processedData = Object.values(
    data.reduce((acc, cur) => {
      if (!acc[cur.date]) acc[cur.date] = { date: cur.date };
      acc[cur.date][cur.category] = cur.value;
      return acc;
    }, {})
  );

  const config = {
    data: processedData,
    xField: 'date',
  };

  return (
    <Chart {...config}>
      {/* 置信区间填充层 */}
      <Area 
        yField="upper_95" 
        y1Field="lower_95" 
        style={{ fill: '#165DFF', fillOpacity: 0.15 }}
      />
      {/* 95%置信区间上下限折线 */}
      <Line yField="upper_95" color="#aaa" size={1} />
      <Line yField="lower_95" color="#aaa" size={1} />
      {/* 预测值折线 */}
      <Line yField="prediction" color="#165DFF" size={2} />
    </Chart>
  );
};

可自行调整填充色、透明度、折线颜色粗细等样式参数适配你的设计需求。

方案二：不修改数据结构，单Line组件配置实现（适合小数据量） #

如果不想调整原有数据结构，可直接在现有Line组件配置中新增填充逻辑：

const Graph = () => {
    const config = {
         data,
         xField: "date",
         yField: "value",
         seriesField: "category",
         // 开启面积填充
         isArea: true,
         // 仅对上限系列开启可见填充
         areaStyle: (datum) => {
           if (datum.category === 'upper_95') {
             return { fill: '#165DFF', fillOpacity: 0.15 };
           }
           return { fill: 'transparent' };
         },
         // 动态获取同日期下限作为面积填充基线
         getY1: (datum) => {
           if (datum.category === 'upper_95') {
             const lowerItem = data.find(item => item.date === datum.date && item.category === 'lower_95');
             return lowerItem ? lowerItem.value : 0;
           }
           return 0;
         },
         // 区分三条折线样式
         series: [
           { type: 'upper_95', color: '#aaa', lineSize: 1 },
           { type: 'lower_95', color: '#aaa', lineSize: 1 },
           { type: 'prediction', color: '#165DFF', lineSize: 2 },
         ]
    };
    
    return <Line {...config} />
};

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