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(){&nbsp; this.myOptions.series = [{&nbsp; &nbsp; name: 'Oceania',&nbsp; &nbsp; data: [2, 2, 2, 6, 13, 30, 46]&nbsp; }]&nbsp; this.updateFromInput = true;}在你的html中：<highcharts-chart&nbsp;&nbsp; [Highcharts]="Highcharts"&nbsp; [options]="myOptions"&nbsp; [(update)]="updateFromInput"></highcharts-chart><button (click)="update()" class="btn">Add</button>一个基本的例子在这里