ChartKick-ChartJs图例onClick覆盖默认行为问题（Vue.js场景）

要兼顾饼图扇区显示/隐藏和表格行过滤两个需求，你只需要在自定义的itemSelected方法里，先触发Chart.js的默认图例点击逻辑，再执行自己的表格过滤代码即可。

步骤1：确认Chart.js的访问权限 #

如果你的项目用的是vue-chartjs，它已经内置了Chart.js，你可以直接使用全局的Chart对象；如果是单独引入的，记得先导入：

import Chart from 'chart.js/auto';

步骤2：修改自定义点击方法 #

在Vue组件的methods中更新itemSelected，先调用默认行为，再处理表格过滤：

methods: {
  itemSelected(e, legendItem) {
    // 1. 触发饼图默认的图例点击行为（切换对应扇区的显示/隐藏）
    // 通过ref获取饼图实例，绑定正确的上下文
    const chartInstance = this.$refs.pieChart.chart;
    Chart.defaults.plugins.legend.onClick.call(chartInstance, e, legendItem);

    // 2. 执行你的表格过滤逻辑
    const targetLegendText = legendItem.text;
    // 假设原始表格数据是tableData，过滤后赋值给filteredTableData用于渲染
    this.filteredTableData = this.tableData.filter(item => {
      // 根据你的数据结构调整匹配规则，比如item的分类字段等于图例文本
      return item.category === targetLegendText;
    });
  }
}

步骤3：给饼图组件添加ref #

在模板里给<pie-chart>加上ref属性，这样才能获取到内部的Chart实例：

<pie-chart 
  ref="pieChart"
  :donut="false" 
  :data="charInfo" 
  :responsive="true" 
  :library="{legend:{display: true,onClick:itemSelected}}" 
  legend="top" 
  :colors="['#5C9AFF', '#FF3263']"
/>

为什么这样可行？ #

Chart.js的图例默认点击逻辑是切换对应数据系列的可见性，当你自定义onClick时会完全覆盖这个默认行为。通过Chart.defaults.plugins.legend.onClick.call(chartInstance, e, legendItem)，我们手动调用了默认方法，并把上下文绑定到当前的饼图实例上，这样就能同时保留原有的扇区交互，再叠加自己的表格过滤功能。

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