angular2-highcharts：レンダリングされたチャートデータを更新する

Question

空のチャートをまずレンダリングしてからデータを入力しようとしています。コンポーネントが初期化され、チャートオプションのリストからチャートが追加されると、チャートがレンダリングされますが、空のチャートが正常にレンダリングされていますが、更新されたデータで再描画することはできません。私は約束を使用してサービスを通じてデータを入力しようとしています（参照用にダミー値を追加します）。

app.component.tsそれはangular2-highchartsのように見える

import { Component, AfterViewInit } from '@angular/core'; 
import { ChartModule } from 'angular2-highcharts'; 

import { configs } from './configs'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
<div *ngFor="let chart of charts"> 
    <div #chart></div> 
</div>` 
}) 
export class AppComponent { 
    charts = []; 
    constructor(){} 

    ngOnInit(): void{ 
     configs.forEach(config => { 
      //Add charts 
      this.charts.push(config); 
     }); 

    } 

    ngAfterViewInit(): void { 
     this.charts.forEach(chart => { 
      chart.series.push({ 
          name: 'Installation', 
          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] 
      }); 
     }); 
    } 
} 

configs.ts

export const configs = [ 
    { 
     chart:{ 
      type:'line', 
      renderTo: 'line_chart' 
     }, 
     chartName : 'abc', 
     title : {text : ''}, 
     tabHolder : {'id':'line_chart','heading':'Line Chart'}, 
     xAxis:{categories:[]}, 
     plotOptions: { 
      line: { 
       dataLabels: {enabled: true}, 
      } 
     }, 
     series: [] 
    }, 
    { 
     chart:{ 
      type:'bar', 
      renderTo: 'bar_chart' 
     }, 
     chartName : 'xyz', 
     title: {text: ''}, 
     tabHolder : {'id':'bar_chart','heading':'Bar Chart'}, 
     xAxis: { 
      categories: [], 
      title: { 
       text: null 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: {text: ''}, 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 
     series: [] 
    } 
] 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { ChartModule } from 'angular2-highcharts' 
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService'; 
import { AppComponent } from './app.component'; 

declare var require: any; 
export function highchartsFactory() { 
    return require('highcharts'); 
} 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    ChartModule, 
    ], 
    providers: [{ 
     provide: HighchartsStatic, 
     useFactory: highchartsFactory, 
    }], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

を超えるだけの薄いラッパーですハイチャート。 docsは、元のネイティブチャートを取得する方法を示します。

テンプレート：

<chart [options]="options" 
    (load)="saveInstance($event.context)"> 
</chart> 

コンポーネント：

saveInstance(chartInstance) { 
    this.chart = chartInstance; 
} 

あなたは、配列を持っているので、あなたがグループにその対応する天然のチャートであなたの最初の選択肢をしたいことがあります。

テンプレート：

<div *ngFor="let chart of charts"> 
    <chart [options]="chart.options" 
     (load)="saveInstance($event.context, chart)"> 
    </chart> 
</div> 

コンポーネント：

ngOnInit(): void{ 
     configs.forEach(config => { 
      //Add charts 
      this.charts.push({ 
       options: config, 
       nativeChart: null // To be obtained with saveInstance 
      }); 
     }); 
    } 

saveInstance(chartInstance, chart) { 
    chart.nativeChart = chartInstance; 
} 

その後、あなたの系列を追加して再描画するネイティブAPIを使用します。

ngAfterViewInit(): void { 
    this.charts.forEach(chart => { 
     chart.nativeChart.addSeries({ 
      name: "...", 
      data: [...] 
     }, true); 
    }); 
}