单击按钮时，折线图图例颜色未得到更新(高图表角度)

Question

我在我的角度应用程序中使用highcharts-angular。我有一个场景，我需要将折线图的颜色更改为其他颜色。(每个东西的图例和线条都应该用我们提供的新颜色进行更新(。请在下面找到使用的代码：

HTML:

<highcharts-chart #lineChart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%;">
</highcharts-chart>
<button (click)="changeColor()">Change color</button>

TS:

import { Component, OnInit, ViewChild } from "@angular/core";
import * as Highcharts from "highcharts";
import HighchartsMore from "highcharts/highcharts-more.src.js";
import HC_exporting from "highcharts/modules/exporting";
HC_exporting(Highcharts);
HighchartsMore(Highcharts);
@Component({
selector: "app-high-chart-question",
templateUrl: "./high-chart-question.component.html",
styleUrls: ["./high-chart-question.component.css"]
})
export class HighChartQuestionComponent implements OnInit {
@ViewChild("lineChart", { static: false }) lineChart: any;
Highcharts = Highcharts;
chartOptions = {
series: [
{
name: "Current - 2014",
data: [
{
name: "1",
y: 200030
},
{
name: "2",
y: 23300
},
{
name: "3",
y: 2300
}
],
color: "indigo"
},
{
name: "Prior - 2013",
data: [
{
name: "1",
y: 90030
},
{
name: "2",
y: 23300
},
{
name: "3",
y: 672300
}
],
color: "green"
}
],
chart: {
type: "line",
renderTo: "chart"
},
title: {
text: "Net activity along fiscal period accross years"
},
xAxis: {
title: {
text: "Fiscal Period"
},
type: "category"
},
yAxis: {
title: {
text: "Functional Amount"
},
gridLineWidth: 1
},
legend: {
enabled: true,
align: "right",
verticalAlign: "middle",
layout: "vertical"
},
credits: {
enabled: false
},
plotOptions: {
series: {
allowPointSelect: true,
minPointLength: 3
}
},
tooltip: {
formatter: function() {
return (
this.series.name + "<br/>" + this.x + " : " + "<b>" + this.y + "<b>"
);
}
}
};
constructor() {}
ngOnInit() {}
changeColor() {
this.lineChart.chart.series.forEach((series, index) => {
let colors: string[] = ["orange", "blue"];
series.color = colors[index];
series.data.forEach(data => {
data.color = colors[index];
});
});
this.lineChart.chart.update({});
}
}

在这里，线条的颜色正在改变，但图例的颜色并没有随着按钮的点击而更新。

演示链接：

https://highcharts-angular-functionality.stackblitz.io/exportcolor

https://stackblitz.com/edit/highcharts-angular-functionality?file=src%2Fapp%2Fstackoverflow%2Fhigh-图表问题%2高级图表问题组件.ts

提前谢谢。

Answer 1

将changeColor函数逻辑更改为：

changeColor() {
this.lineChart.chart.series.forEach((series, index) => {
let colors: string[] = ["orange", "blue"];
series.update({
color: colors[index]
})
});
}

演示：https://stackblitz.com/edit/highcharts-angular-functionality-vjjwvh?file=src/app/stackoverflow/high-图表问题/高级图表问题组件.ts

series.update是一个重新绘制整个系列的功能，包括一个图例。

API：https://api.highcharts.com/class-reference/Highcharts.Series#update