在 ng2 图表中使用函数

Question

您好，我目前正在尝试在 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 未定义但我没有得到任何红色下划线并且不知道如何修复它。

Answer 1

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

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

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

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

请看一下你修改后的StackBlitz。

在 ng2 图表中使用函数

Using a function in ng2 Charts

chart.js

ng2-charts

angular