如何在Chart的同一onClick事件中调用JS与TypeScript函数

嘿，作为同样在Angular+TypeScript里踩过Chart.js事件上下文坑的人，我来给你分享两个完美解决这个问题的办法！你遇到的核心矛盾就是普通函数里this指向图表实例，箭头函数里this指向组件实例，但没法同时拿到两者，下面的方案能帮你同时搞定获取激活柱状图和调用组件对话框的需求：

方案一：提前保存组件上下文到变量 #

这个方法最直观，在组件类里先把组件的this存成一个变量，然后在onClick的普通函数里，既用this访问图表实例，又用提前保存的变量访问组件方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-chart',
  templateUrl: './your-chart.component.html'
})
export class YourChartComponent {
  // 提前把组件实例的this存起来
  private componentContext = this;

  public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    onClick: function(evt, datasets) {
      // 这里的this指向Chart.js的图表实例，用来获取激活的柱状图
      const activeBar = this.getElementAtEvent(evt)[0];
      if (activeBar) {
        console.log('当前激活的柱状图:', activeBar);
      }

      // 用提前保存的componentContext调用组件的openDialog方法
      if (datasets.length > 0) {
        this.componentContext.openDialog();
      }
    },
    // 其他配置项...
  };

  openDialog() {
    // 你的Angular对话框逻辑，比如调用MatDialog或者自定义组件
    console.log('打开对话框');
  }
}

为什么这个方法有效？ #

组件类里的componentContext变量会捕获组件实例的this，而onClick的普通函数里的this会被Chart.js自动绑定为图表实例，这样你就能在同一个函数里同时操作两者了。

方案二：用箭头函数+Chart.js的getChart API获取图表实例 #

如果你更习惯用箭头函数（不用额外保存变量），可以通过Chart.js的getChart方法从点击事件元素中获取图表实例，这样箭头函数里的this依然指向组件，同时也能拿到图表上下文：

import { Component } from '@angular/core';
import Chart from 'chart.js'; // 确保导入Chart类

@Component({
  selector: 'app-your-chart',
  templateUrl: './your-chart.component.html'
})
export class YourChartComponent {
  public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    onClick: (evt, datasets) => {
      // 这里的this直接指向Angular组件实例，直接调用openDialog
      if (datasets.length > 0) {
        this.openDialog();
      }

      // 通过Chart.getChart从点击元素获取图表实例
      const chartInstance = Chart.getChart(evt.target);
      if (chartInstance) {
        const activeBar = chartInstance.getElementAtEvent(evt)[0];
        console.log('当前激活的柱状图:', activeBar);
      }
    },
    // 其他配置项...
  };

  openDialog() {
    // 你的对话框逻辑
    console.log('打开对话框');
  }
}

注意事项 #

• 确保你已经正确导入了Chart类，不同版本的Chart.js导入方式可能略有不同（比如import * as Chart from 'chart.js'）。
• evt.target需要是图表的canvas元素，如果你的模板里有包装元素，可能需要调整为evt.currentTarget或者通过DOM查找canvas。

总结 #

两种方案都能完美解决你的问题：

• 方案一适合喜欢用普通函数、希望直观区分两个上下文的场景；
• 方案二更简洁，利用Chart.js的API直接获取实例，不用额外变量。

你可以根据自己的代码习惯选择其中一种，亲测在Angular 14+和Chart.js 3.x版本中都能正常工作！

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