web-dev-qa-db-ja.com

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

2番目の方法：

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

grapharea.clear();

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

私はそれを正しいと呼んでいますか？ OnButtonClick同じキャンバスを使用するこの関数を呼び出します。

javascriptcanvasgraphchart.js
37
Uzair Xlade

同じキャンバスに別のチャートを描画できるようにするために使用する正しい方法は、.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 });

docsから直接（プロトタイプメソッドの下） ：

。破壊する（）

これを使用して、作成されたチャートインスタンスを破棄します。これにより、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を新しいチャートに使用しました。現在のチャートの前にキャンバスを占有しているチャートに関連する可能性のある奇妙な動作に遭遇した場合は、このアプローチも念頭に置いてください。

70
xnakos

チャートを呼び出すたびにキャンバスを削除してください、これは私のために働いた

$("canvas#chartreport").remove();
$("div.chartreport").append('<canvas id="chartreport" class="animated fadeIn" height="150"></canvas>');
var ctx = document.getElementById("chartreport").getContext("2d");
chartreport= new Chart(ctx, { .... });
22
It0007

ChartJS v2.xの場合、 update（） を使用して、明示的に破棄せずにチャートデータを更新できますキャンバスを作成します。

var chart_ctx = document.getElementById("chart").getContext("2d");

var chart = new Chart(chart_ctx, {
    type: "pie",
    data: {}
    options: {}
});

$.ajax({
    ...
}).done(function (response) {
    chart.data = response;
    chart.update();
});
5
bmatovu

現在、Chart.js 2.7.2を使用しています。私のアプリでは、複数のグラフを作成しており、それらにアクセスしてデータを適切に「置換」し、ホバー時に表示される「古いグラフ」を修正する方法が必要でした。私が試した答えはどれもうまくいきませんでした。

1つまたは複数のチャートでこれを管理する方法は次のとおりです。

チャートをグローバルに保存する

var charts=[]; // global

チャートを作成する機能

function createChart(id, type, labels, data)
{
    // for multiple datasets
    var datasets=[];
    data.forEach(function(set) {
        datasets.Push({
            label: set.label,
            data: set.data
        });
    });  

    var config = {
        type: type,
        data: {
            labels: labels,
            datasets: datasets
        }
    };

    if(typeof charts[id] == "undefined") // see if passed id exists
    {   
        // doesn't, so create it
        charts[id]= new (function(){
            this.ctx=$(id); // canvas el
            this.chart=new Chart(this.ctx, config);
        })();     
        console.log('created chart '+charts[id].chart.canvas.id);     
    }
    else
    {
        charts[id].chart.destroy(); // "destroy" the "old chart"
        charts[id].chart=new Chart(charts[id].ctx, config); // create the chart with same id and el
        console.log('replaced chart '+charts[id].chart.canvas.id);        
    }
    // just to see all instances
    Chart.helpers.each(Chart.instances, function(instance){
        console.log('found instance '+instance.chart.canvas.id)
    })

}

次のようなキャンバス要素ごとに：

<canvas id="thiscanvasid"></canvas>

関数を使用してチャートを作成/置換します

createChart('#thiscanvasid', 'bar', json.labels, json.datasets);
1
Chris

もっと良い方法があったかもしれませんが、私に合った答えはありませんでした。

document.querySelector("#chartReport").innerHTML = '<canvas id="myChart"></canvas>';

私のHTML部分は

<div class="col-md-6 col-md-offset-3">
     <div id="chartReport">
         <canvas id="myChart"></canvas>
     </div>
</div>
1
sh6210

これをテストできます

 $('#canvas').replaceWith($('<canvas id="canvas" height="320px"></canvas>'));

;）

0
Willywes

この問題を解決するために、jQueryのadd()およびremove()メソッドを使用して、キャンバスをクリアしました。コンポーネントを削除し、再度描画する前に、jQueryのappend()メソッドを使用して同じidのキャンバスを再度追加しています。

redraw(){

 $("#myChart").remove();// removing previous canvas element
 //change the data values or add new values for new graph
 $("#chart_box").after("<canvas id='myChart'></canvas>");
 // again adding a new canvas element with same id
 generateGraph();// calling the main graph generating function 

}
0
Ankit Abhinav

常に1つのグラフ/ページのみを使用します。 Destroy（）は問題を解決しました。

 if (
        window.myLine !== undefined
        &&
        window.myLine !== null
    ) {
        window.myLine.destroy();
    }

    window.myLine = new Chart(graphCanvasCtx, config);
0
sabiland