使用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重新分配给它自己的副本，以使角度变化检测工作。

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

请查看您修改后的StackBlitz。