highcharts - 如何在高角图表包装器中使用添加系列和更新方法?
解决方案
如何使用 addSeries() 将系列添加到现有图表中,以及如何更新现有图表的属性。
使用highcharts-angular
包装器时,不建议使用类似addSeries()
或update()
直接在图表参考上的图表方法。
您必须更新整个组件,而不仅仅是图表属性。它可以通过更新 chartOptions 对象(添加新系列、点、标题等)和设置来实现updateFlag = true
。检查下面发布的代码和演示。
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)]="updateFlag"
[oneToOne]="true"
style="width: 100%; height: 400px; display: block;"
>
</highcharts-chart>
<button (click)="updateChart()">Update 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;
updateFlag = false;
Highcharts = Highcharts;
chartConstructor = "chart";
chartCallback;
chartOptions = {
series: [
{
data: [1, 2, 3, 6, 9]
}
],
exporting: {
enabled: true
},
yAxis: {
allowDecimals: false,
title: {
text: "Data"
}
}
};
constructor() {
const self = this;
this.chartCallback = chart => {
// saving chart reference
self.chart = chart;
};
}
ngOnInit() {}
updateChart() {
const self = this,
chart = this.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
self.chartOptions.series = [
{
data: [10, 25, 15]
},
{
data: [12, 15, 10]
}
];
self.chartOptions.title = {
text: "Updated title!"
};
self.updateFlag = true;
}, 2000);
}
}
演示:
文档参考:
推荐阅读
- tensorflow - 编译 tensorflow 1.6+ Windows 10 no AVX
- python - 如何根据条件语句拆分数组?
- c# - 删除文档数据库成功但没有响应资源
- android - 所有库必须使用相同的版本
- javascript - 第二个或嵌套的 event.PreventDefault() 不起作用
- javascript - Angular将样式标签添加到innerHTML
- apache-beam - 使用 tensorflow 变换的 writeTransform 函数时出错
- r - Click on points on Leaflet map to generate ggplot in Shiny
- windows - 为什么从容器内部复制到挂载文件夹的文件没有出现在主机文件夹中?
- excel - Or Interior.Color Statement Excel VBA