在ng2图表中使用功能

问题描述

您好，我目前正在尝试在ng2图表中使用一个简单的函数。

我的功能：

  changeFontColor(){
    let change = this.lineChartOptions.legend.labels.fontColor = "red";
    return change;
  };

和我的lineChartOptions：

public lineChartOptions: ChartOptions = {
    responsive: true,legend:{
    onHover: this.changeFontColor,labels: {
      BoxWidth: 10,padding: 20,fontSize: 15,fontFamily: "new Times Roman",fontStyle: "bold",fontColor: "grey",};

但是我不知道为什么控制台无法运行，提示lineChartOptions是未定义的，但是我没有得到任何红色下划线，也不知道如何解决它。

解决方法

您应按以下方式定义onHover回调函数：

onHover: () => this.changeFontColor(),

changeFontColor方法也必须更改。请注意，我已将lineChartOptions与其自身的副本重新分配，以使Angular更改检测正常工作。

changeFontColor(): void {
  this.lineChartOptions.legend.labels.fontColor = "red";
  this.lineChartOptions = JSON.parse(JSON.stringify(this.lineChartOptions));
};

请查看您修改过的StackBlitz。