动态更新的ng2-图表 [英] Dynamically updated ng2-charts

问题描述

是否可以从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.

https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1?p=preview

推荐答案

我知道了，也许它不是现有的最佳选择，但它可行.我们无法更新现有的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()
}

这篇关于动态更新的ng2-图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！