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

HTML 是这样的：

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

如何重写这段代码，使其可以访问addSeries等方法，从而动态显示新数据？

我看过这两个帖子，它们看起来很有帮助：

Highcharts add series dynamically

Adding new HighChart Series

问题是我不能像他们那样访问这些方法。

当我尝试实现 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>

一个基本的例子here