ibeautiful
2023-07-14 15:05:16
我想訪問 highcharts API,特別是我想動(dòng)態(tài)添加或刪除一系列。本質(zhì)上我無法訪問任何方法,或者我不確定如何訪問。我的代碼如下: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等方法,以便動(dòng)態(tài)顯示新數(shù)據(jù)?當(dāng)我嘗試實(shí)現(xiàn) Chart = new Highcharts.Chart(options); 時(shí)?就像他們一樣,我只會(huì)遇到錯(cuò)誤。感謝是提前的。
1 回答

慕虎7371278
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊
它需要分兩步完成。首先,更改 ChartOption 對(duì)象內(nèi)的值。其次更新圖表。
在您的組件中,您添加一個(gè)像這樣的函數(shù),例如:
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>
一個(gè)基本的例子在這里
添加回答
舉報(bào)
0/150
提交
取消