亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular 中的 Highcharts - 訪問 API

Angular 中的 Highcharts - 訪問 API

ibeautiful 2023-07-14 15:05:16
我想訪問 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); 時?就像他們一樣,我只會遇到錯誤。感謝是提前的。
查看完整描述

1 回答

?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

它需要分兩步完成。首先,更改 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>

一個基本的例子在這里


查看完整回答
反對 回復 2023-07-14
  • 1 回答
  • 0 關注
  • 128 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號