Câu hỏi Làm cách nào để xóa biểu đồ khỏi canvas để không thể kích hoạt sự kiện di chuột?


Tôi đang sử dụng Chartjs để hiển thị một biểu đồ Line và điều này hoạt động tốt:

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

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

Nhưng vấn đề xảy ra khi tôi cố gắng thay đổi dữ liệu cho Biểu đồ. Tôi cập nhật biểu đồ bằng cách tạo một thể hiện mới của Biểu đồ với các điểm dữ liệu mới, và do đó khởi tạo lại canvas.

Điều này hoạt động tốt. Tuy nhiên, khi tôi di chuột qua biểu đồ mới, nếu tôi tình cờ đi qua các vị trí cụ thể tương ứng với các điểm được hiển thị trên biểu đồ cũ, nhãn / nhãn vẫn được kích hoạt và đột nhiên biểu đồ cũ hiển thị. Nó vẫn hiển thị trong khi con chuột của tôi ở vị trí này và biến mất khi di chuyển khỏi điểm đó. Tôi không muốn biểu đồ cũ hiển thị. Tôi muốn loại bỏ nó hoàn toàn.

Tôi đã cố gắng xóa cả canvas và biểu đồ hiện có trước khi tải biểu đồ mới. Như:

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

chart.clear();

Nhưng không ai trong số này đã làm việc cho đến nay. Bất kỳ ý tưởng về cách tôi có thể ngăn chặn điều này xảy ra?


76
2017-07-18 01:02


gốc


Dude, đây chính là vấn đề tôi đang gặp phải. Phương thức "destroy ()" không hoạt động và nó làm tôi bực dọc. - neaumusic
Tôi có thể hỏi làm thế nào bạn đang nhận được quyền truy cập vào đối tượng biểu đồ? Tôi có cùng một vấn đề, tôi tạo ra một biểu đồ và sau đó về việc xử lý một nút bấm, tôi cần phá hủy nó, nhưng nó nằm trong một chức năng hoàn toàn khác và tôi không thể tìm được cách truy cập đối tượng biểu đồ thông qua khung hoặc ngữ cảnh các đối tượng. - Matt Williams
Đã xảy ra lỗi khi gặp sự cố này, hãy xem lỗi tại đây. github.com/jtblin/angular-chart.js/issues/187 - MDT


Các câu trả lời:


Tôi có vấn đề lớn với điều này

Đầu tiên tôi đã thử .clear() sau đó tôi đã thử .destroy() và tôi đã thử đặt tham chiếu biểu đồ của mình thành null

Điều cuối cùng đã khắc phục vấn đề cho tôi: xóa <canvas> và sau đó reappending new <canvas> vào vùng chứa chính


Mã cụ thể của tôi (rõ ràng có hàng triệu cách để thực hiện việc này):

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

90
2017-07-31 16:15



Điều này chỉ hoạt động tốt - Leandro Temperoni
Công trình Great sir !!! - Bhavesh Gangani
Làm việc như một nhà vô địch. Nếu có ai biết nếu Chart.js phiên bản 2 sửa lỗi này, hãy đăng nó ở đây. Tôi tự hỏi nếu phá hủy được phá vỡ hoặc nếu chúng ta đang sử dụng nó không chính xác. - KickingLettuce
phá hủy làm việc! stackoverflow.com/a/24854333/212661 - sandeep talabathula
Tốt đẹp! Cảm ơn! Tôi vừa thêm $ ('# results-graph'). Remove (); $ ('# graph-container'). chắp thêm ('<canvas id = "results-graph"> <canvas>'); trước khi tạo biểu đồ. - Ignacio


Tôi đã phải đối mặt với cùng một vấn đề vài giờ trước đây.

Phương thức ".clear ()" thực sự xóa canvas, nhưng (hiển nhiên) nó rời khỏi đối tượng còn sống và phản ứng.

Đọc kỹ tài liệu chính thức, trong phần "Sử dụng nâng cao", tôi đã nhận thấy phương thức ".destroy ()", được mô tả như sau:

"Sử dụng tính năng này để hủy mọi phiên bản biểu đồ được tạo. Điều này sẽ   dọn sạch mọi tham chiếu được lưu trữ cho đối tượng biểu đồ trong Chart.js,   cùng với mọi trình nghe sự kiện được liên kết đính kèm bởi Chart.js. "

Nó thực sự làm những gì nó tuyên bố và nó đã làm việc tốt cho tôi, tôi đề nghị bạn để cho nó một thử.


29
2017-07-20 19:56



Bạn có thể cho thấy một ví dụ? Tôi đã cố gắng sử dụng chặn nhiều lần và nó không bao giờ hoạt động. Tôi luôn nhận được lỗi rằng phương thức không tồn tại. - Ben Hoffman
(<ChartInstance> this.chart) .destroy (); - David Dal Busco
Đây là anszwer phải. Để tham khảo trong tương lai, hãy xem: stackoverflow.com/questions/40056555/… - ThePhi


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



đây là giải pháp thay thế tốt nhất - RafaSashi
Tốt nhất. Cảm ơn - Manjunath Siddappa


Đây là điều duy nhất làm việc cho tôi:

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

9
2017-08-14 18:50





Tôi đã có cùng một vấn đề ở đây ... Tôi đã cố gắng sử dụng phương thức destroy () và clear (), nhưng không thành công.

Tôi giải quyết nó theo cách tiếp theo:

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

Nó hoạt động hoàn hảo với tôi ... Tôi hy vọng rằng nó sẽ giúp.


4
2017-08-12 07:29





Điều này làm việc rất tốt cho tôi

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

Sử dụng .hủy hoại điều này để tiêu diệt bất kỳ trường hợp biểu đồ nào được tạo. Thao tác này sẽ xóa mọi tham chiếu được lưu trữ đối tượng biểu đồ trong Chart.js, cùng với bất kỳ trình lắng nghe sự kiện được liên kết nào được đính kèm bởi Chart.js. Điều này phải được gọi trước khi canvas được sử dụng lại cho biểu đồ mới.


4
2017-08-04 06:56



Cách này hoạt động đúng với tôi, có vẻ như nó phá hủy các callback di chuột. Xe tăng soo nhiều !! - Antoine Pointeau


Sử dụng CanvasJS, điều này làm việc cho tôi xóa biểu đồ và mọi thứ khác, có thể phù hợp với bạn, cho phép bạn đặt canvas / biểu đồ của mình đầy đủ trước mỗi lần xử lý ở nơi khác:

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

1
2017-08-20 03:45



cho tôi không phải các phương pháp trên đã làm việc. Điều này làm việc hoàn hảo. Cảm ơn rất nhiều. - beginner


Tôi không thể có được .destroy () để làm việc, vì vậy đây là những gì tôi đang làm. Biểu đồ_parent div là nơi tôi muốn canvas hiển thị. Tôi cần canvas để thay đổi kích thước mỗi lần, vì vậy câu trả lời này là phần mở rộng của phần trên.

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





Khi bạn tạo một canvas biểu đồ mới.js, điều này tạo ra một iframe mới ẩn, bạn cần xóa canvas và iframe cũ.

$('#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 });

tài liệu tham khảo: https://github.com/zebus3d/javascript/blob/master/chartJS_filtering_with_checkboxs.html


1
2018-06-10 20:43





Chúng tôi có thể cập nhật dữ liệu biểu đồ trong Chart.js V2.0 như sau:

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

1
2018-04-24 12:56





Đối với tôi điều này đã làm việc:

		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