如何在Ant Design Line Chart中对图例进行分组以同时切换多条折线？

你可以通过自定义图例 + 监听图例点击事件 + 系列过滤三个步骤实现需求，完整实现代码如下：

import { Line } from '@ant-design/charts';
import { useState } from 'react';

const data = [
  {"date":"2021-11-17", "category":"upper_95", "value":23.87625},
  {"date":"2021-11-17", "category":"lower_95", "value":20.32322},
  {"date":"2021-11-17", "category":"prediction","value":21.21381},
  {"date":"2021-11-18", "category":"upper_95", "value":25.87625},
  {"date":"2021-11-18", "category":"lower_95", "value":22.32322},
  {"date":"2021-11-18", "category":"prediction","value":19.21381},
  {"date":"2021-11-19", "category":"upper_95", "value":26.87625},
  {"date":"2021-11-19", "category":"lower_95", "value":24.32322},
  {"date":"2021-11-19", "category":"prediction","value":25.21381},
]

const Graph = () => {
  // 维护当前隐藏的系列数组
  const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);

  const config = {
    data,
    xField: "date",
    yField: "value",
    seriesField: "category",
    // 手动定义图例项，覆盖默认生成的图例
    legend: {
      items: [
        {
          id: '95% CI',
          name: '95% CI',
          value: '95% CI',
          // 自定义图例颜色，和折线颜色保持一致
          marker: { symbol: 'circle', style: { fill: '#91d5ff' } },
        },
        {
          id: 'prediction',
          name: '预测值',
          value: 'prediction',
          marker: { symbol: 'circle', style: { fill: '#165dff' } },
        }
      ]
    },
    // 自定义折线颜色，保证上下95%区间颜色一致
    color: (category) => {
      if (category === 'upper_95' || category === 'lower_95') return '#91d5ff';
      return '#165dff';
    },
    // 过滤不需要显示的系列
    filter: (datum) => {
      return !hiddenSeries.includes(datum.category);
    },
    // 监听图例点击事件
    onLegendItemClick: (e) => {
      const clickedItem = e.item.id;
      let newHidden = [...hiddenSeries];
      
      if (clickedItem === '95% CI') {
        // 点击95% CI时同时操作上下两个区间的显隐
        const hasCI = hiddenSeries.includes('upper_95');
        if (hasCI) {
          newHidden = newHidden.filter(item => item !== 'upper_95' && item !== 'lower_95');
        } else {
          newHidden.push('upper_95', 'lower_95');
        }
      } else if (clickedItem === 'prediction') {
        // 点击预测值时只操作自身
        const hasPrediction = hiddenSeries.includes('prediction');
        if (hasPrediction) {
          newHidden = newHidden.filter(item => item !== 'prediction');
        } else {
          newHidden.push('prediction');
        }
      }
      setHiddenSeries(newHidden);
    }
  };
  
  return <Line {...config} />
};

关键配置说明 #

• legend.items：覆盖默认根据seriesField自动生成的图例，只保留需要展示的分组图例
• color：统一upper_95和lower_95的折线颜色，符合用户对95% CI是同一个分组的视觉认知
• filter：根据维护的隐藏系列列表过滤数据，不在隐藏列表的系列才会被渲染
• onLegendItemClick：监听图例点击事件，点击95% CI时同时修改上下两个区间系列的显隐状态

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