[解決済み] chart.jsで新しいデータを読み込む

質問

のAPIは chart.js を使うと、例えば読み込んだデータセットのポイントを編集することができます。

.update( )

Chart インスタンスで update() を呼び出すと、更新された値でチャートが再レンダリングされます。 を呼び出すと、更新された値でチャートが再レンダリングされます。 の値を編集し、1つのアニメーションレンダリングループでそれらをレンダリングすることができます。

.addData( valuesArray, label )

Chart インスタンスで addData(valuesArray, label) を呼び出すと、各データセットの値の配列とそれらの点のラベルが渡されます。 各データセットの値の配列と、それらの点のラベルを渡します。

.removeData( )

Chart インスタンスで removeData() を呼び出すと、チャート上のすべてのデータセットから最初の を削除します。

これらすべては素晴らしいのですが、古いものを消して、まったく新しいデータセットをロードする方法がわかりません。ドキュメントでは、これをカバーしていないようです。

どのように解決するのですか?

私はこれで大きな問題を抱えました

まず、私は .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);
};