angular - highcharts-angular 从数据库动态更新
问题描述
我在 Angular 6 应用程序中使用 highcharts-angular。当我在 ngOnInit 中设置数据,对其进行硬核时,图表是可见的并且可以正常工作。
但我想动态更新图表系列,这意味着向系列添加点,添加新系列......这将在调用 web API 并获取新数据后完成,调用 loadBidChartData()。
如果我为聊天设置新系列或更新系列,图表看不到变化,初始状态没有变化。 我该如何解决这个问题?
这是html中的示例代码的小和平是这样的:
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block; overflow: auto;" [update]="true" ></highcharts-chart>
角度:
import * as Highcharts from 'highcharts';
export class ExampleComponent implements OnInit {
Highcharts = Highcharts; // required
chartOptions = {
chart: {
type: "scatter",
width: 900
},
},
tooltip: {
valueDecimals: 0,
formatter: function () {
return this.y + ' €';
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
},
yAxis: {
type: 'number',
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
floating: false,
borderWidth: 1
},
series: []
};
ngOnInit(): void {
this.chartOptions.series= [{
name: 'first last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
}];
}
loadBidChartData(bidApiModel: BidItem[]): void {
this.chartOptions.series= [{
name: 'first last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
},
{
name: 'second last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 28), 50], [Date.UTC(2018, 11, 16, 10, 56, 45), 152], [Date.UTC(2018, 11, 16, 10, 56, 53), 250], [Date.UTC(2018, 11, 16, 10, 57, 11), 320]]
}];
}
}
Solution:
Working demo with updating in background and adding and removing points to highcharts: https://stackblitz.com/edit/angular-bv26xz
Thank you User3250 and Wojciech Chmiel for the help.
解决方案
You need to use [(update)]
flag to update the series as below:
loadBidChartData(bidApiModel: BidItem[]): void {
this.chartOptions.series= [{
name: 'first last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
},
{
name: 'second last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 28), 50], [Date.UTC(2018, 11, 16, 10, 56, 45), 152], [Date.UTC(2018, 11, 16, 10, 56, 53), 250], [Date.UTC(2018, 11, 16, 10, 57, 11), 320]]
}];
this.updateFlag = true;
}
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block; overflow: auto;" [(update)]="updateFlag" ></highcharts-chart>
Working demo here: https://stackblitz.com/edit/angular-d5spve
推荐阅读
- javascript - 异步文件夹创建有什么意义?
- conv-neural-network - 卷积层可以学习计算输入数据的标准差吗?
- html - 为什么此代码不会显示在 wordpress 页面上?
- .net - 在提出请求时计算价格时如何按价格对数百种产品进行排序
- mongodb - 如何通过存储库查询环回 4 中的特定字段?
- c# - c# 正则表达式澄清
- java - 用于匹配不同大小向量中的最后一个数字的正则表达式
- java - -1个月+1天的时间操作与开始仍有1个月的差异
- java - 在构造函数中设置变量数组的最小大小
- laravel - 使用多个 Docker 容器时无法清除 Laravel 缓存