Javascript Chart.JS自定义图例onClick事件在调用原始事件处理程序时返回错误

我有两张图表。第一个是条形图，它使用相同的代码。第二个是饼图，它不起作用

我正在尝试为饼图图例创建自定义onClick处理程序，出现以下错误：

ERROR TypeError: Cannot read property '_resolveAnimations' of null
at Chart._updateDatasetVisibility (chart.esm.js:5677)
at Chart.show (chart.esm.js:5686)
at Object.onClick (chart.esm.js:7798)
at Legend.onClick (analytics.component.ts:529)
at callback (helpers.segment.js:89)
at Legend.handleEvent (chart.esm.js:7744)
at Object.afterEvent (chart.esm.js:7781)
at callback (helpers.segment.js:89)
at PluginService._notify (chart.esm.js:4774)
at PluginService.notify (chart.esm.js:4761)

下面您可以看到onClick处理程序的代码

legend: {
        onClick: (e: any, legendItem: { text: string; }, legend: any) => {
          /**
           * Stores original event handler for legend onClick 
           * and executes it so we don't override it.
           */
          Chart.defaults.plugins.legend.onClick(e, legendItem, legend);

          /**
           * Custom legend item handler
           */
          let toBeRemoved = this.consumption.find((c) => c.categoryName === legendItem.text);
          let toBeRemovedIndex = this.consumption.indexOf(toBeRemoved);

          if (toBeRemoved) {
            // Hide consumption item from table
            this.hideConsumptionItem(toBeRemoved, toBeRemovedIndex);
            // Recalculate consumption sum
            this.recalculateConsumptionSum();
          } else {
            // Restore hidden item from saved items
            this.restoreConsumptionItem(legendItem);
            // Recalculate consumption sum
            this.recalculateConsumptionSum();
          }
        },
        labels: {
          fontColor: '#4f4f51',
          padding: this.deviceService.isDesktopDisplay() ? 10 : 6,
          boxWidth: this.deviceService.isDesktopDisplay() ? 40 : 15,
          fontSize: this.deviceService.isDesktopDisplay() ? 12 : 8,
        },
        scales: {
          xAxes: [{
            ticks: {
              display: false
            }
          }]
        },
        title: {
          display: false
        }
      },
     }

---

它似乎工作正常，尽管配置的其余部分有点错误，但是比例和标题对象不属于图例对象，并且比例不再是数组

默认单击的工作示例：

//虚拟数组和方法，因此没有错误
常数消耗=[]；
const recreacteConsumptionsum=（）=>{}；
常数restoreConsumptionItem=（e）=>{}；
变量选项={
键入“pie”，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
边框宽度：1，
背景颜色：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]
},
{
标签：“#个点”，
数据：[7,11,5,8,3,7]，
边框宽度：1，
背景颜色：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]
}
]
},
选项：{
比例：{
/*x:{注释缩放配置，因为我们不希望x轴线在我们的dougnut后面
滴答声：{
显示：假
}
} */
},
插件：{
图例：{
onClick:（e，legendItem，图例）=>{
/**
*存储legend onClick的原始事件处理程序
*并执行它，这样我们就不会覆盖它。
*/
如果（legend.chart.config.type=='pie'| | legend.chart.config.type==='doughnut'）{
Chart.Controller.doughnut.overrides.plugins.legend.onClick（e，legendItem，legend）
}否则{
Chart.defaults.plugins.legend.onClick（e，legendItem，legend）；
}
/**
*自定义图例项处理程序
*/
让toBeRemoved=consumpion.find（（c）=>c.categoryName==legendItem.text）；
让toBeRemovedIndex=消费指数（toBeRemoved）；
如果（待删除）{
//从表中隐藏消费项目
这个。hideConsumptionItem（toBeRemoved，toBeRemovedIndex）；
//重新计算消费总额
this.recreacteConsumptionSum（）；
}否则{
//从保存的项目还原隐藏的项目
恢复性消费（传奇项目）；
//重新计算消费总额
重新计算消费额（）；
}
},
标签：{
颜色：'#4F41'，
填充：10，
箱宽：40，
字体：{
尺码：12
}
},
},
标题：{
显示：假
}
}
}
}
var ctx=document.getElementById（'chartJSContainer'）.getContext（'2d'）；
新图表（ctx，选项）

它适用于“直线”和“条形”图表，但如果将其更改为“饼图”，则不起作用。饼图返回错误。这是因为圆环图和饼图控制器会覆盖图例的默认onClick处理程序，因为它们的行为不同，所以您需要将该处理程序从控制器中取出，请参阅更新的答案“chart.controllers”未定义，因此无法运行chart.controllers.doughnut.overrides。谢谢，对于较低版本，您的答案是正确的，但正确的解决方案是使用Chart.overrides.pie.plugins.legend.onClick而不是Chart.controllers.doughnut.overrides.plugins.legend.onClick。我已使用此修复程序更新了您的答案。