angular2-highcharts : 렌더링 된 차트 데이터 업데이트

Question

먼저 빈 차트를 렌더링하고 데이터를 채우려고합니다. 구성 요소가 초기화되고 차트가 차트 옵션 목록을 통해 추가 될 때 차트가 렌더링되지만 빈 차트가 성공적으로 렌더링되지만 업데이트 된 데이터로 다시 그릴 수는 없습니다. 약속을 사용하여 서비스를 통해 데이터를 채우려고합니다 (참조를 위해 더미 값 추가).

이 app.component.ts

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

그것은 angular2-highcharts처럼 보이는

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

이 끝난 단지 얇은 래퍼입니다 Highcharts. 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); 
    }); 
}