Pertanyaan Bagaimana menghapus grafik dari kanvas sehingga acara yang melayang tidak dapat dipicu?


Saya menggunakan Chartjs untuk menampilkan Diagram Baris dan ini berfungsi dengan baik:

// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');

// draw line chart
var chart = new Chart(targetCanvas).Line(chartData);

Tetapi masalah terjadi ketika saya mencoba untuk mengubah data untuk Bagan. Saya memperbarui grafik dengan membuat turunan baru dari Bagan dengan titik data baru, dan dengan demikian menginisialisasi ulang kanvas.

Ini berfungsi dengan baik. Namun, ketika saya mengarahkan kursor ke bagan baru, jika saya kebetulan pergi ke lokasi tertentu yang sesuai dengan poin yang ditampilkan pada bagan lama, hover / label masih dipicu dan tiba-tiba grafik lama terlihat. Tetap terlihat saat mouse saya berada di lokasi ini dan menghilang ketika pindah dari titik itu. Saya tidak ingin bagan lama ditampilkan. Saya ingin menghapusnya sepenuhnya.

Saya sudah mencoba membersihkan kanvas dan bagan yang ada sebelum memuat yang baru. Seperti:

targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height);

dan

chart.clear();

Tetapi tidak ada yang berhasil sejauh ini. Ada gagasan tentang bagaimana saya bisa menghentikan hal ini terjadi?


76
2017-07-18 01:02


asal


Jawaban:


Saya punya masalah besar dengan ini

Pertama saya mencoba .clear() lalu saya mencoba .destroy() dan saya mencoba mengatur referensi grafik saya ke nol

Apa yang akhirnya memperbaiki masalah ini untuk saya: menghapus <canvas> elemen dan kemudian mengajukan kembali yang baru <canvas> ke penampung induk


Kode spesifik saya (jelas ada sejuta cara untuk melakukan ini):

var resetCanvas = function(){
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph');
  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);
};

89
2017-07-31 16:15



Saya menghadapi masalah yang sama beberapa jam yang lalu.

The ".clear ()" metode sebenarnya membersihkan kanvas, tetapi (ternyata) meninggalkan objek hidup dan reaktif.

Membaca dengan seksama dokumentasi resmi, di bagian "Penggunaan lanjutan", saya telah memperhatikan metode ".destroy ()", dijelaskan sebagai berikut:

"Gunakan ini untuk menghancurkan contoh grafik apa pun yang dibuat. Ini akan terjadi   membersihkan referensi apa pun yang disimpan ke objek bagan di dalam Chart.js,   bersama dengan pendengar acara terkait yang dilampirkan oleh Chart.js. "

Itu benar-benar melakukan apa yang diklaim dan telah bekerja dengan baik untuk saya, saya menyarankan Anda untuk mencobanya.


29
2017-07-20 19:56



var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}

19
2018-05-26 20:58



Ini adalah satu-satunya hal yang berhasil bagi saya:

document.getElementById("chartContainer").innerHTML = '&nbsp;';
document.getElementById("chartContainer").innerHTML = '<canvas id="myCanvas"></canvas>';
var ctx = document.getElementById("myCanvas").getContext("2d");

8
2017-08-14 18:50



Saya memiliki masalah yang sama di sini ... Saya mencoba menggunakan metode destroy () dan clear (), tetapi tidak berhasil.

Saya menyelesaikannya dengan cara berikut:

HTML:

<div id="pieChartContent">
    <canvas id="pieChart" width="300" height="300"></canvas>
</div>

Javascript:

var pieChartContent = document.getElementById('pieChartContent');
pieChartContent.innerHTML = '&nbsp;';
$('#pieChartContent').append('<canvas id="pieChart" width="300" height="300"><canvas>');

ctx = $("#pieChart").get(0).getContext("2d");        
var myPieChart = new Chart(ctx).Pie(data, options);

Ini bekerja sempurna untuk saya ... Saya harap itu membantu.


4
2017-08-12 07:29



Ini bekerja sangat baik untuk saya

    var ctx = $("#mycanvas");
     var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata});
        LineGraph.destroy();

Menggunakan .menghancurkan ini untuk menghancurkan contoh grafik apa pun yang dibuat. Ini akan membersihkan referensi apa pun yang disimpan ke objek bagan di dalam Chart.js, bersama dengan pendengar peristiwa terkait yang dilampirkan oleh Chart.js. Ini harus dipanggil sebelum kanvas digunakan kembali untuk bagan baru.


4
2017-08-04 06:56



Dengan menggunakan CanvasJS, ini berfungsi untuk saya menghapus grafik dan yang lainnya, mungkin juga bekerja untuk Anda, memberikan Anda mengatur kanvas / bagan sepenuhnya sebelum setiap pemrosesan di tempat lain:

var myDiv= document.getElementById("my_chart_container{0}";
myDiv.innerHTML = "";

1
2017-08-20 03:45



Saya tidak bisa mendapatkan .destroy () untuk bekerja, jadi inilah yang saya lakukan. The chart_parent div adalah di mana saya ingin kanvas muncul. Saya perlu kanvas untuk mengubah ukuran setiap kali, jadi jawaban ini merupakan perpanjangan dari yang di atas.

HTML:

<div class="main_section" > <div id="chart_parent"></div> <div id="legend"></div> </div>

JQuery:

  $('#chart').remove(); // this is my <canvas> element
  $('#chart_parent').append('<label for = "chart">Total<br /><canvas class="chart" id="chart" width='+$('#chart_parent').width()+'><canvas></label>');

1
2017-11-18 07:36



Saat Anda membuat satu kanvas chart.js baru, ini menghasilkan satu iframe baru yang disembunyikan, Anda perlu menghapus kanvas dan iframes lama.

$('#canvasChart').remove(); 
$('iframe.chartjs-hidden-iframe').remove(); 
$('#graph-container').append('<canvas id="canvasChart"><canvas>'); 
var ctx = document.getElementById("canvasChart"); 
var myChart = new Chart(ctx, { blablabla });

referensi: https://github.com/zebus3d/javascript/blob/master/chartJS_filtering_with_checkboxs.html


1
2018-06-10 20:43



Kami dapat memperbarui data grafik dalam Chart.js V2.0 sebagai berikut:

var myChart = new Chart(ctx, data);
myChart.config.data = new_data;
myChart.update();

1
2018-04-24 12:56



Bagi saya ini berhasil:

		var in_canvas = document.getElementById('chart_holder');
	//remove canvas if present
			while (in_canvas.hasChildNodes()) {
				  in_canvas.removeChild(in_canvas.lastChild);
				} 
	//insert canvas
			var newDiv = document.createElement('canvas');
			in_canvas.appendChild(newDiv);
			newDiv.id = "myChart";


0
2017-09-17 09:27