Angular2-高级图表:更新已呈现的图表数据

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

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

它看起来像angular2--高图集只是一个超薄的图表包装。文档展示了如何获取底层的本机图表。

模板：

<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);
    });
}