Angular 中的 Highcharts - 访问 API

Question

我想访问 highcharts API，特别是我想动态添加或删除一系列。本质上我无法访问任何方法，或者我不确定如何访问。我的代码如下：import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-widget-area',  templateUrl: './area.component.html',  styleUrls: ['./area.component.scss']})export class AreaComponent implements OnInit {  chartOptions: {};  Highcharts = Highcharts;  constructor() { }  ngOnInit(): void {    this.myChart(); } myChart(){  this.chartOptions = {    chart: {        type: 'line'    },    title: {        text: 'Historic and Estimated Worldwide Population Growth by Region'    },    subtitle: {        text: 'Source: Wikipedia.org'    },    xAxis: {        categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],        tickmarkPlacement: 'on',        title: {            enabled: false        }    },    yAxis: {        title: {            text: 'Billions'        },        labels: {            formatter () {                return this.value / 1000;            }        }    },    tooltip: {        split: true,        valueSuffix: ' millions'    },    plotOptions: {      line: {          dataLabels: {              enabled: true          },          enableMouseTracking: false      }  },    series: [{        name: 'Asia',        data: [502, 635, 809, 947, 1402, 3634, 5268]    }, {        name: 'Africa',        data: [106, 107, 111, 133, 221, 767, 1766]    }, {        name: 'Europe',        data: [163, 203, 276, 408, 547, 729, 628]    }, {        name: 'America',        data: [18, 31, 54, 156, 339, 818, 1201]    }, {        name: 'Oceania',        data: [2, 2, 2, 6, 13, 30, 46]    }]};  setTimeout(() => {  window.dispatchEvent(    new Event('resize')  );},300); }}我该如何重写这段代码，使其可以访问addSeries等方法，以便动态显示新数据？当我尝试实现 Chart = new Highcharts.Chart(options); 时 就像他们一样，我只会遇到错误。感谢是提前的。

Answer 1

它需要分两步完成。首先，更改 ChartOption 对象内的值。其次更新图表。

在您的组件中，您添加一个像这样的函数，例如：

update(){

  this.myOptions.series = [{

    name: 'Oceania',

    data: [2, 2, 2, 6, 13, 30, 46]

  }]

  this.updateFromInput = true;

}

在你的html中：

<highcharts-chart 

  [Highcharts]="Highcharts"

  [options]="myOptions"

  [(update)]="updateFromInput">

</highcharts-chart>

<button (click)="update()" class="btn">Add</button>

一个基本的例子在这里