angular - angular2-highcharts: بهروزرسانی دادههای نمودار رندر شده

من در تلاش هستم ابتدا یک نمودار خالی را نمایش دهم و سپس دادهها را پر کنم. نمودارها زمانی که کامپوننت مقداردهی اولیه میشود، رندر میشوند و نمودارها از طریق یک لیست از گزینههای نمودار اضافه میشوند، با اینکه نمودار خالی با موفقیت رندر میشود، قادر به بازنقاشی آن با دادههای بهروزرسانیشده نیستم. من سعی دارم دادهها را از طریق سرویس و با استفاده از 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 { }

پاسخ شماره ۱

به نظر میرسد 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);
    });
}