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

是的，您可以绑定。但是chartjs插件是基于元素的。因此，您需要编写指令以实施以应用任何基于jQuery或元素的方法。

这是您问题的解决方案。这里的技巧是将组件分配给其他变量，并在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;
  }

有没有办法从Chartjs的click函数调用组件的函数

1 个答案: