The API for chart.js
允许编辑加载到其中的数据集的点,例如:
.update( )
Calling update() on your Chart instance will re-render the chart with any updated values, allowing you to edit the value of multiple existing points, then render those in one animated render loop.
.addData( valuesArray, label )
Calling addData(valuesArray, label) on your Chart instance passing an array of values for each dataset, along with a label for those points.
.removeData( )
Calling removeData() on your Chart instance will remove the first value for all datasets on the chart.
所有这些都很棒,但我不知道如何加载一个全新的数据集,同时清除旧的。文档似乎没有涵盖这一点。
最佳答案
我遇到了很大的问题
首先我尝试了 .clear()
然后我试了.destroy()
我尝试将我的图表引用设置为 null
最终为我解决了问题:删除 <canvas>
元素,然后重新附加一个新的 <canvas>
到父容器
有一百万种方法可以做到这一点:
var resetCanvas = function () {
$('#results-graph').remove(); // this is my <canvas> element
$('#graph-container').append('<canvas id="results-graph"><canvas>');
canvas = document.querySelector('#results-graph'); // why use jQuery?
ctx = canvas.getContext('2d');
ctx.canvas.width = $('#graph').width(); // resize to parent width
ctx.canvas.height = $('#graph').height(); // resize to parent height
var x = canvas.width/2;
var y = canvas.height/2;
ctx.font = '10pt Verdana';
ctx.textAlign = 'center';
ctx.fillText('This text is centered on the canvas', x, y);
};
关于javascript - chart.js 加载全新数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24785713/