Chart.js 替换所有数据-前端问题

Chart.js replace all data(Chart.js 替换所有数据)

本文介绍了Chart.js 替换所有数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了 Chart.js 的问题.

im having a issue with Chart.js.

首先，我设置了一个数据，然后当一个参数发生变化时，我想重新绑定整个图表.这项工作，但它就像旧数据仍然落后于新数据的图表.

Firts, I set a data, and then when a parameter change, I want rebind the entire chart. This work, but its like the chart with the old data still behind the new one.

第一 ->

chart.Line(data, options);

在一个事件中->

  chart.Line(newdata, options);

我看到了这个解决方案chart.js 加载全新数据

但我不喜欢这种方式.我在角度指令上下文中，所以这不是最好的方法.

but I dont like this way. Im in a angular directive context, so it's not the best aproach.

我试过没有结果

.update()、.removeData()、.clear()、.destroy() 等

.update( ), .removeData( ), .clear(), .destroy(), etc

这是我当前的指令

http://plnkr.co/edit/qn2UUyznonKm6zgEi8FW?p=catalogue

有什么想法吗?

推荐答案

您正在创建一个新图表，这就是为什么您最终会在新图表后面使用旧图表.

You are creating a new chart, that's why you end up with the old chart behind the new one.

我使用过的一个简单选项:从您用于图表的画布中删除旧图表:

One simple option that I've used: Remove the old chart from the canvas that you are using for the chart:

$('#canvas').replaceWith('<canvas id="canvas"></canvas>');

现在在同一画布中使用新数据创建图表

And now create the chart with the new data in the same canvas

var ctxChart = document.getElementById("canvas").getContext("2d");
window.myChart = new Chart(ctxChart).Line(newdata, options);

希望对你有帮助！

这篇关于Chart.js 替换所有数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！