Primeng（Angular）环形图标签点击事件：数据过滤实现方案问询

核心问题说明 #

大部分图表库的环形图图例标签点击事件和数据点点击事件是分开的，你用的onDataSelect大概率只响应环形图扇区（数据点）的点击，不会触发图例标签的点击动作，这就是为什么你之前没看到效果。

实现步骤（以主流图表库为例） #

1. 先明确图表库类型，绑定对应图例点击事件

以下是两种常用库的具体实现：

示例1：ECharts 环形图

ECharts 提供了专门的图例点击事件legendselectchanged，也可以直接在配置项里给图例绑定点击回调：

// 初始化图表
const chartInstance = echarts.init(document.getElementById('doughnut-chart'));

// 原始数据源
const rawData = [
  { name: '分类A', value: 80 },
  { name: '分类B', value: 120 },
  { name: '分类C', value: 90 }
];

// 基础配置项
const baseOption = {
  legend: {
    data: rawData.map(item => item.name),
    // 可选：设置单选/多选模式
    selectedMode: 'single',
    // 直接在图例配置里绑定点击回调
    onClick: function(params) {
      const targetName = params.name;
      // 过滤数据：只保留选中标签对应的数据
      const filteredData = rawData.filter(item => item.name === targetName);
      // 更新图表数据
      chartInstance.setOption({
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: filteredData
        }]
      });
      // 这里可扩展：同步过滤表格/列表等其他组件数据
    }
  },
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    data: rawData
  }]
};

chartInstance.setOption(baseOption);

// 也可以用全局事件监听方式（适合复杂场景）
chartInstance.on('legendselectchanged', function(params) {
  // 获取当前选中的标签名称
  const activeLabel = Object.keys(params.selected).find(key => params.selected[key]);
  const filteredData = rawData.filter(item => item.name === activeLabel);
  chartInstance.setOption({ series: [{ data: filteredData }] });
});

示例2：Chart.js 环形图

Chart.js 没有直接的图例点击配置，需要手动监听图例DOM的点击事件：

const ctx = document.getElementById('my-doughnut').getContext('2d');
const rawData = [
  { label: '分类A', value: 80 },
  { label: '分类B', value: 120 },
  { label: '分类C', value: 90 }
];

const chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: rawData.map(item => item.label),
    datasets: [{ data: rawData.map(item => item.value) }]
  }
});

// 监听图例DOM的点击事件
document.querySelector('#my-doughnut .chart-legend').addEventListener('click', function(e) {
  if (e.target.tagName !== 'LI') return;
  const selectedLabel = e.target.textContent.trim();
  // 过滤数据并更新图表
  const filteredItems = rawData.filter(item => item.label === selectedLabel);
  chart.data.labels = filteredItems.map(item => item.label);
  chart.data.datasets[0].data = filteredItems.map(item => item.value);
  chart.update();
});

2. 通用数据过滤逻辑

不管用什么库，核心流程都是：

• 捕获图例标签的点击事件，拿到选中的标签名称/标识
• 根据标识过滤原始数据源，得到目标子集
• 将过滤后的数据重新渲染到图表（或其他需要同步的组件）

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