动态更新的ng2-图表
是否可以从ng2-charts
动态更新任何chart
?我知道还有其他库,例如angular2-highcharts
,但是我想使用ng2-charts
处理它.主要问题是单击按钮后如何重绘chart
?我可以调整窗口大小,数据将被更新,因此必须手动选择它.
Is it possible to update any chart
from ng2-charts
dynamically? I know there are other libraries like angular2-highcharts
, but I would like to handle it using ng2-charts
. Main question is how can I redraw chart
, after button click? I can resize window and data will be updated, so it have to be any option to do it manually.
我知道了,也许它不是现有的最佳选择,但它可行.我们无法更新现有的chart
,但是可以使用现有的chart
创建新的chart
并添加新的点.关闭图表的动画,我们甚至可以获得更好的效果.
I figure it out, maybe its not the best existing option, but it works. We can't update existing chart
, but we can create new one, using our existing chart
and add new points. We can even get better effect, turning animation of chart off.
解决问题的功能:
Function that solved problem:
updateChart(){
let _dataSets:Array<any> = new Array(this.datasets.length);
for (let i = 0; i < this.datasets.length; i++) {
_dataSets[i] = {data: new Array(this.datasets[i].data.length), label: this.datasets[i].label};
for (let j = 0; j < this.datasets[i].data.length; j++) {
_dataSets[i].data[j] = this.datasets[i].data[j];
}
}
this.datasets = _dataSets;
}
实时演示: https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1?p=preview
Live demo: https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1?p=preview
@UPDATE: 正如@Raydelto Hernandez在下面的评论中提到的,更好的解决方案是:
@UPDATE: as @Raydelto Hernandez mentioned in comment below, better solution is:
updateChart(){
this.datasets = this.dataset.slice()
}