Angular 折线图图例颜色在按钮单击时未得到更新（高角度图表）

我在角度应用程序中使用了

highcharts angular

。我有一个场景，我需要将折线图的颜色更改为其他颜色。（每件事物的图例和线条都应该使用我们提供的新颜色进行更新）。请在下面找到所使用的代码：

HTML:

变色

TS:

从“@angular/core”导入{Component，OnInit，ViewChild}；
从“Highcharts”导入*作为Highcharts；
从“highcharts/highcharts more.src.js”导入highcharts摩尔；
从“海图/模块/导出”导入HC_导出；
HC_出口（高图表）；
海图（海图）；
@组成部分({
选择器：“应用程序高图表问题”，
templateUrl:“./high chart question.component.html”，
样式URL:[“/”高图表问题.component.css“]
})
导出类HighChartQuestionComponent实现OnInit{
@ViewChild（“线形图”{static:false}）线形图：任意；
海图=海图；
图表选项={
系列：[
{
名称：“当前-2014年”，
数据：[
{
名称：“1”，
y:200030
},
{
名称：“2”，
y:23300
},
{
名称：“3”，
y:2300
}
],
颜色：“靛蓝”
},
{
名称：“2013年以前”，
数据：[
{
名称：“1”，
y:90030
},
{
名称：“2”，
y:23300
},
{
名称：“3”，
y:672300
}
],
颜色：“绿色”
}
],
图表：{
键入：“行”，
renderTo：“图表”
},
标题：{
正文：“会计期间跨年度净活动”
},
xAxis：{
标题：{
正文：“财政期间”
},
类型：“类别”
},
亚克斯：{
标题：{
正文：“功能量”
},
网格线宽度：1
},
图例：{
启用：对，
对齐：“右”，
垂直排列：“中间”，
布局：“垂直”
},
学分：{
已启用：false
},
打印选项：{
系列：{
allowPointSelect:true，
最小点长度：3
}
},
工具提示：{
格式化程序：函数（）{
返回(
this.series.name+“
”+this.x+：“+”“+this.y+”
);
}
}
};
构造函数（）{}
ngOnInit（）{}
changeColor（）{
this.lineChart.chart.series.forEach（（系列，索引）=>{
让颜色：字符串[]=[“橙色”、“蓝色”]；
series.color=颜色[索引]；
series.data.forEach（数据=>{
data.color=颜色[索引]；
});
});
this.lineChart.chart.update（{}）；
}
}

在这里，线条的颜色正在更改，但图例的颜色不会在单击按钮时得到更新

演示链接：

---

提前感谢。

将您的changeColor功能逻辑更改为：

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

演示：

系列。更新是重新绘制整个系列的功能，包括图例

API:

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({});
}
}

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