Highcharts-如何更新角度系列? [英] Highcharts - how to update series in angular?

问题描述

我在柱状图中的更新系列数据有问题.首先，当我的模型为空时，我将一个空数组设置为序列，然后在ngOnchanges方法中将modelData映射为匹配格式.不幸的是，该图表仍然为空. 这是我的组件代码:

I have a problem with an update series data in column chart. At the beginning, when my model is empty I set an empty array as the series and then in ngOnchanges method I map my modelData to matching format. Unfortunately, the chart is still empty. Here is my component code:

        export class ColumnChartComponent implements OnInit, OnChanges {
        highcharts = Highcharts;
        chartConstructor: string;
        @Input() dataModel: MyChartModel[];

        ngOnInit(): void {
            this.initChart();
        }

        ngOnChanges(): void {
            this.chartOptions = {
                series: this.getData()
            };        
        }

        private initChart(): void {
            this.highcharts = Highcharts;
            this.chartConstructor = "chart";
            this.chartOptions = {
                chart: {
                    type: "column"
                }
                //...
                // others settings
                //...
                series: []
            };
        }



        getData(){
        // some methods to map from dataModel to expected array
        // finally return something like this:
        return [{
            data: [2134000, 3168818, 2569759],
            name: 2015,
            type: "column"`enter code here`
        },{
            data: [2497680, 3195299, 2480444],
            name: 2014,
            type: "column"
        },{
            data: [2872000, 3604271, 2925828],
            name: 2016,
            type: "column"
        }]
    }

最后图表为空.有趣的是，当我在initChart()方法中设置series: [{}]时，图表显示了一个系列.如果设置series: [{},{}]，则图表将显示两个序列，依此类推.但是我不知道dataModel中将有多少个序列，因此无法在数组中设置适当数量的对象.

And finally chart is empty. What's interesting, when I set series: [{}] in initChart() method, chart show one series. If I set series: [{},{}] chart will show two series, etc. But I don't know how many series will be in my dataModel, so I cannot set the array with a suitable count of objects in the array.

我尝试使用this.chartOptions.series.push(myObject)，但是它也不起作用.

I have tried use this.chartOptions.series.push(myObject) but it doesn't work too.

推荐答案

我为您制作了一个简单的在线示例，其中在Angular应用程序中更新了图表.我使用了推荐的highcharts-angular官方Highcharts包装器(可以在此处下载: https://github.com/highcharts/highcharts-angular ).查看下面发布的代码和演示:

I've made a simple online example for you with highcharts update in Angular app. I've used highcharts-angular official Highcharts wrapper which I recommend you (it can be downloaded here: https://github.com/highcharts/highcharts-angular). Check the code and demo posted below:

app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HighchartsChartModule } from "highcharts-angular";
import { ChartComponent } from "./chart.component";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent, ChartComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

chart.component.html:

<div class="boxChart__container">
  <div>
    <highcharts-chart
      id="container"
      [Highcharts]="Highcharts"
      [constructorType]="chartConstructor"
      [options]="chartOptions"
      [callbackFunction]="chartCallback"
      [(update)]="updateFromInput"
      [oneToOne]="true"
      style="width: 100%; height: 400px; display: block;"
    >
    </highcharts-chart>

    <button (click)="onInitChart()">Init Chart</button>
  </div>
</div>

chart.component.ts:

import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

@Component({
  selector: "app-chart",
  templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
  title = "app";
  chart;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = "chart";
  chartCallback;
  chartOptions = {
    series: [],
    exporting: {
      enabled: true
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: "Data"
      }
    }
  };

  constructor() {
    const self = this;

    // saving chart reference using chart callback
    this.chartCallback = chart => {
      self.chart = chart;
    };
  }

  ngOnInit() {}

  onInitChart() {
    const self = this,
      chart = this.chart;

    chart.showLoading();
    setTimeout(() => {
      chart.hideLoading();

      self.chartOptions.series = [
        {
          data: [2134000, 3168818, 2569759],
          name: 2015,
          type: "column"
        },
        {
          data: [2497680, 3195299, 2480444],
          name: 2014,
          type: "column"
        },
        {
          data: [2872000, 3604271, 2925828],
          name: 2016,
          type: "column"
        }
      ];

      self.updateFromInput = true;
    }, 2000);
  }
}

演示:
https://codesandbox.io/s/kw94l52z55

这篇关于Highcharts-如何更新角度系列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！