角度2-高图:更新呈现的图表数据

Question

我正在尝试先渲染空图表，然后再填写数据。当组件初始化时，图表会呈现，并且图表是通过图表选项列表添加的，尽管空图表已成功呈现，但我无法使用更新的数据重新绘制它。我正在尝试使用 promise 通过服务填写数据(添加虚拟值以供参考(。

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-highcharts 只是 Highcharts 上的一个薄包装器。这些文档演示如何获取基础本机图表。

模板：

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