我在更新柱形图中的系列数据时遇到问题。一开始,当我的模型为空时,我将一个空数组设置为系列,然后在 ngOnchanges
方法中将我的 modelData
映射到匹配的格式。不幸的是,图表仍然是空的。
这是我的组件代码:
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
中会有多少系列,所以我无法使用数组中合适的对象数来设置数组。
我试过使用 this.chartOptions.series.push(myObject)
但它也不起作用。
最佳答案
我已经为您制作了一个简单的在线示例,其中包含 Angular 应用程序中的 highcharts 更新。我使用了 highcharts-angular
官方 Highcharts 包装器,我推荐给你(可以在这里下载:https://github.com/highcharts/highcharts-angular)。检查下面发布的代码和演示:
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>
图表组件.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);
}
}
关于angular - Highcharts - 如何以 Angular 更新系列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54328513/