[解決済み] chart.jsの棒グラフを破棄して、同じ<canvas>に他のグラフを再描画する。

質問

私は Chart.js ライブラリを使って 棒グラフ で、うまく動作しているのですが、今度は 棒グラフ を破壊して 折れ線グラフ を同じ キャンバス . 私は、キャンバスをクリアするために、これら2つの方法を試してみました。

var grapharea = document.getElementById("barChart").getContext("2d");

grapharea.destroy();

var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });

第二の方法

var grapharea = document.getElementById("barChart").getContext("2d");

grapharea.clear();

var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });

正しく呼び出せていますか？OnButtonClickでは、同じcanvasを使用するこの関数を呼び出しています。

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

同じキャンバスに別のグラフを描くための正しい方法は .destroy() . このメソッドは、先に作成されたチャートオブジェクトに対して呼び出さなければなりません。また、両方のチャートに同じ変数を使用することもできます。

var grapharea = document.getElementById("barChart").getContext("2d");

var myChart = new Chart(grapharea, { type: 'bar', data: barData, options: barOptions });

myChart.destroy();

myChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });

そのまま ドキュメント (プロトタイプメソッド) の下にある :

.destroy()

これは、作成されたすべてのチャート・インスタンスを破棄するために使用します。これは、Chart.js内でチャートオブジェクトに保存されたすべての参照と、Chart.jsによって取り付けられたすべての関連イベントリスナーをクリーンアップします。これは、キャンバスが新しいチャートのために再利用される前に呼び出されなければなりません。

// Example from the docs
var myLineChart = new Chart(ctx, config);
// Destroys a specific chart instance
myLineChart.destroy();

キャンバスを新しいチャートに再利用する前に、このメソッドを呼び出さなければならないことが明示されています。

.clear() はまた、同じセクションの後半で、チャートキャンバスをクリアする関数として言及されています。このメソッドを呼び出した後もチャートは健在なので、新しいチャートのためにキャンバスを再利用したい場合は、このメソッドを呼び出すべきではありません。

正直なところ、あなたのようなケースでは、私はしばしばコンテナである div をラップするために canvas をラップし、新しいチャートを作成する必要があるときはいつでも、新しい canvas 要素をこの div . 次に、この新しく作成した canvas を新しいチャートに使っています。もしあなたが、現在のチャートの前にあるキャンバスをチャートが占めることに関連した奇妙な動作に遭遇したら、このアプローチも覚えておいてください。