angular - 有没有办法从 Chartjs 的点击功能调用组件的功能

Question

我如何从我的 chartjs 的 onclick 函数调用我的组件的函数

export class ReportesComponent implements OnInit {


  constructor( public _router: Router ,private data:ReporteService) {}
  this.chart = new Chart('myChart', {
  type: 'bar',
  data: {
   labels: this.barCharLabels,
   datasets: [
    { 
      data : this.dataCharCartera,
      label:'Cartera',
      backgroundColor: 'rgb(232,95,95)'
    },
    { 
      data : this.dataChar,
      label:'Penetracion',
      backgroundColor: 'rgb(95,145,232)'
    }
   ]
    },
  options: {
      legend : {
        display: true
      },
      responsive : true,
      scales : {
        xAxes :[{
          ticks:{
            beginAtZero: true
          }
        }]
      },
      onClick: function (e) {
        var element = this.getElementAtEvent(e);
        if (element.length) {
           console.log(element[0]._view.label)
        }
        console.log(element);

      },
    }
 });
 }
 Showtest(e) : void {
 console.log(e)
 this._router.navigate(['/Menu/Informacion']);//
 }

}

我想调用我的函数 Showtest 并使用我的 chartjs 中的 onClick 函数获取元素值，谢谢

Answer 1

是的，你可以绑定(bind)。但是 chartjs 插件是基于元素的。因此，您需要编写一个指令来实现应用任何基于 jQuery 或元素的方法。

这是您问题的解决方案。 这里的技巧是将组件 this 分配给其他变量并在 chartjs click 函数中访问它。之后，您可以传递任何您想要的数据。

    ngAfterViewInit() {
    this.canvas = this.mychart.nativeElement; 
    this.ctx = this.canvas.getContext('2d');
    let $this = this;
    let myChart = new Chart(this.ctx, {
      type: 'bar',

      data: ...,
      options: {
          legend : {
            display: true
          },
          responsive : true,
          scales : {
            xAxes :[{
              ticks:{
                beginAtZero: true
              }
            }]
          },
          onClick: function (e) {
            debugger;
            var element = this.getElementAtEvent(e);
            if (element.length) {
               console.log(element[0]._view.label)
            }
            $this.Showtest(e, this, element);
          },
          //onClick: this.Showtest.bind(this),
        }
    });
  }

  Showtest(event, chart, element) : void {
    debugger;
  }