Цвет легенды линейного графика не обновляется при нажатии кнопки (highcharts- angular)

Question

Я использую highcharts-angular в моих 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-chart-question%2Fhigh-chart-question.component.ts

Заранее спасибо.

Answer 1

Измените changeColor logi функции c на:

  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 / вопрос с высокой диаграммой / вопрос с высокой диаграммой -question.component.ts

series.update - это функция, которая повторяет aws всю серию снова - включает в себя легенду.

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