angular2-highcharts : update rendered chart data

Question

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

应用程序组件.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]
          });
      });
  }
}

配置.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: []
    }
]

应用程序模块.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 的薄包装。 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;
}

然后使用 native API 添加您的系列并重绘:

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