Ben, iyi çalışan bir <strong>çubuk grafiğini</strong> çizmek için <strong>Chart.js</strong> kitaplığı kullanıyorum aynı <canvas>

Question

diğer grafiği yeniden çizmek için chart.js çubuk grafik yok, ama şimdi çubuk grafiği yok etmek isteyen ve çizgi grafiği numaralı çizgi ile aynı tuval numaralı tuvalette yapın.

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

grapharea.destroy(); 

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

ikinci yolu:

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

grapharea.clear(); 

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

bunu doğru çağıran muyum ben tuval temizlemek için şu iki şekilde çalıştılar? OnButtonClick Aynı tuvali kullanan bu işlevi çağırırım.

Answer 1

Aynı tuvalde başka bir grafik çizebilmek için kullanılacak doğru yöntem .destroy()'dur. Önceden oluşturulan grafik nesnesinde onu çağırmalısınız. Aynı değişkeni her iki grafik için de kullanabilirsiniz. Düz docs (under Prototype Methods) den

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()

bunu kullanın oluşturulan tüm grafik örneklerini yok etmek. Bu, Chart.js içindeki grafik nesnesinde depolanan tüm referansları, Chart.js tarafından eklenen herhangi bir ilişkili olay dinleyicisi ile birlikte temizleyecektir. Yeni bir grafik için tuvalin yeniden kullanılmasından önce bu çağrılmalıdır.

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

Açıkça tuval yeni bir grafik için yeniden kullanılabilir önce bu yöntem denilen gerektiğini belirtmektedir.

.clear() ayrıca, "grafik tuvalini temizleyecektir. Animasyon çerçeveleri arasında dahili olarak kullanılan, ancak yararlı bulabileceğiniz" işleviyle aynı bölümde de bahsedilmektedir. Bu yöntem çağrıldıktan sonra grafik canlı ve iyi olacak, bu yüzden yeni bir grafik için tuvali yeniden kullanmak istiyorsanız, bu yöntem aramak değil.

olsa dürüst olmak gerekirse, sizinki gibi durumlarda, sık sık yeni bir grafik oluşturmak için gereken zaman, benim canvas sarmak ve bir konteyneri div kullandık, bu div yeni canvas elemanı yerleştirilir. Daha sonra yeni grafik için yeni oluşturulan canvas'u kullandım. Muhtemelen garip davranışlara rastlarsanız, muhtemelen mevcut tablodan önce tuvali işgal eden grafiklerle ilgili olursa, bu yaklaşım da akla gelir.

Answer 2

bu benim için çalıştı, her grafik çağrısından sonra tuvali çıkarın

$("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, { .... });