chart.js加载全新的数据 [英] chart.js load totally new data

问题描述

的图表：chart.js 允许一个用于编辑加载到其中的数据集的点，例如：

The API for chart.js allows one to edit points of the datasets loaded into it, for example:

.update（）

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

.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.

在Chart实例上调用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.

所有这些都很棒，但我不能弄清楚如何加载一个全新的数据进去，擦掉旧的。文档似乎没有涵盖这一点。

All of these are great, but I cannot figure out how to load an entirely new dataset in, wiping out the old. The documentation does not seem to cover this.

推荐答案

我遇到了很大的问题

首先我尝试了 .clear（）然后我尝试了 .destroy（）我尝试设置我的图表引用为null

First I tried .clear() then I tried .destroy() and I tried setting my chart reference to null

最终为我解决了什么问题：删除< canvas> 元素，然后重新上传一个新的< canvas> 到父容器

What finally fixed the issue for me: deleting the <canvas> element and then reappending a new <canvas> to the parent container

这是一百万种方法：

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

这篇关于chart.js加载全新的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！