ChartJS v2.5.0饼图图例onClick自定义逻辑兼容默认功能报错求助

我刚好在ChartJS v2.x版本里踩过这个坑！你遇到的Cannot read property '_meta' of undefined报错，核心原因是默认图例点击方法的上下文绑定错误，咱们来一步步解决：

正确写法一：绑定正确的上下文调用默认方法 #

在自定义的legend.onClick函数里，this指向的是Chart实例，但默认的Chart.defaults.global.legend.onClick方法需要的上下文是图例组件实例（不是Chart实例）。你可以通过this.legend拿到图例实例，再绑定上下文调用默认方法：

legend: {
  position: 'top',
  onClick: function(e, legendItem) {
    // 自定义逻辑：记录点击的图例信息
    console.log('被点击的图例文本:', legendItem.text);
    console.log('对应数据集索引:', legendItem.datasetIndex);
    
    // 获取图例组件实例，绑定为默认方法的this上下文
    const legendInstance = this.legend;
    Chart.defaults.global.legend.onClick.call(legendInstance, e, legendItem);
  }
}

正确写法二：手动实现默认切换行为（更稳定） #

如果不想纠结上下文问题，也可以直接手动实现默认的图例切换逻辑，这样完全避免上下文绑定错误：

legend: {
  position: 'top',
  onClick: function(e, legendItem) {
    // 自定义逻辑
    console.log('点击的图例:', legendItem.text);
    
    // 手动实现默认的数据集显示/隐藏切换
    const chart = this;
    const datasetIndex = legendItem.datasetIndex;
    const datasetMeta = chart.getDatasetMeta(datasetIndex);
    
    // 切换隐藏状态：遵循ChartJS默认的状态切换规则
    datasetMeta.hidden = datasetMeta.hidden === null 
      ? !chart.data.datasets[datasetIndex].hidden 
      : null;
    
    // 更新图表
    chart.update();
  }
}

为什么之前的写法会报错？ #

你之前调用Chart.defaults.global.legend.onClick.call(this, e, l)时，this是Chart实例，但默认方法内部期望this是图例组件实例（这个实例带有chart属性指向Chart对象）。当默认方法执行this.chart时，因为当前this是Chart实例，它没有chart属性，后续获取数据集元数据时就会拿到undefined，最终抛出Cannot read property '_meta' of undefined的错误。

同理，你尝试覆盖全局默认onClick的写法，也是因为上下文绑定错误导致的问题。

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