chart.js onClick事件函数，访问angular组件

【问题标题】：chart.js onClick event function, access angular componentchart.js onClick事件函数，访问angular组件
【发布时间】：2020-09-08 11:18:26
【问题描述】：

如何在 ChartJs 函数的 onClick 函数上获取角度 component？有办法吗？因为this 是图表，self 是窗口...

我的图表就是这样添加到some.component.ts

 @ViewChild(Chart) mainChart: Chart // declaration on public variables on component.ts

  // construction of chart on API call result
  this.mainChart = new Chart(MeasureUnitMonthlyComponent.CHART_ID, {
    type: 'bar',
    data: {
      labels: aChartLabelsArray,
      datasets: aDatasetsArray
    },
    options: {
      onClick: this.onChartClicked,
      legend: {
        display: true
      },
    ....

【问题讨论】：

TS 看起来不像 Angular 组件；将该图表定义为@ViewChild... 然后它有一个父组件。
@MartinZeitler thx，已更新但仍不知道如何获取它。更新了截图

标签： javascript angular chart.js

【解决方案1】：

如果你写，onClick: () => {}、this 将是编写箭头函数时的组件/类。

如果你写，onClick: function() {}、this 将是图表对象。

如果您想同时访问图表对象和组件/类，我将使用下面链接并解释的thisAsThat 实用程序。

TypeScript: How to use both fat arrow and this?

对于onClick:，您可以使用答案中出现的thisAsThat 实用程序，其中this 将是类/组件，that 将是图表对象。

我还会考虑使用ng2-charts，它是chart.js 的包装器，其中包含(chartClicked) 事件。

Chart.js & Angular 2 - ng2-charts Custom on Click Event

【讨论】：