图表js加载全新的数据

Question

图表的API。js允许编辑加载到其中的数据集的点，例如：

在图表实例上调用update（）将使用任何更新的值重新渲染图表，允许您编辑多个现有点的值，然后在一个动画渲染循环中渲染这些点。

在Chart实例上调用addData（值数组，标签），传递每个数据集的值数组以及这些点的标签。

在Chart实例上调用RemveData（）将删除图表上所有数据集的第一个值。

所有这些都很棒，但是我不知道如何加载一个全新的数据集，清除旧的数据集。留档似乎没有涵盖这一点。




Answer 1

用图表。jsv2。0您可以执行以下操作：

websiteChart.config.data = some_new_data;
websiteChart.update();

Answer 2

你需要摧毁：

myLineChart.destroy();

然后重新初始化图表：

var ctx = document.getElementById("myChartLine").getContext("2d");
myLineChart = new Chart(ctx).Line(data, options);

Answer 3

我对此有很大的问题

首先，我尝试了。清除（），然后我尝试了。销毁（），并尝试将图表引用设置为空

最终修复了我的问题：删除

有一百万种方法可以做到这一点：

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);
};