Question

我目前正在使用来自charts.js的一些图表，我添加了一些与它们的简单交互，当用户点击条形图中的条形图时，变量会保存点击哪个条形图。< / p>

此变量更新折线图，此图表使用先前保存在数组中的数据进行更新，因此每次用户点击条形图中的不同栏时，折线图都应更改。

我的问题是变量没有变化，我得到两个不同的值。默认情况下，变量初始化为0。

控制台日志输出：

from barchart click:3   
from change function:0 

from barchart click:2  
from change function:0

我从同时发生的2个不同功能中打印这些行。

这是在条形图上单击条形图时应更改变量值的函数。

  graphClickEvent(event:any, array:any){

    if(array[0]){

       this.offsetGraficas = array[0]._index;
     console.log("from barchart click:"+this.offsetGraficas);
    }

}

和另一个同时发生的功能：

changeHistorico(n:number) {
   console.log("from change function:"+this.offsetGraficas);

    this.show_historico = true;

    //some unrelated code goes here
}

从我看到的，首先执行graphClickEvent，但我不会对变量进行任何更改。为什么它没有按预期工作？

Answer 1

在graphClickEvent中看起来像“this”，而changeHistorico中的“this”与此不同。

Answer 2

是的，单击事件中的this与父组件的this不同。
全局变量是一种方法。

但是更好的解决方案是通过chart.js图的配置来传递组件实例。

this.dsChart2 = new Chart(myCtx2,{
  type: 'pie',
  parentInstance: this,
  data: { ... }
  options:{
    onClick: this.graphClickEvent
  }
}

现在，当调用graphClickEvent时，您将获得两个值，事件和图表实例，您已经从中获得了索引值。

因此，现在从点击事件功能中，您可以引用parentInstance，如下所示：

graphClickEvent(evt,item) {
  console.dir(item);
  let parentThis = item[0]['_chart']['config']['parentInstance'];
  // here parentThis is the component this or $scope
  parentThis.variable = value;
}

angular2和charts.js互动

2 个答案: