Phá hủy chart.js thanh đồ thị để vẽ lại đồ thị khác trong cùng một <canvas>

Question

Tôi đang sử dụng thư viện Chart.js để vẽ một đồ thị thanh, nó đang làm việc tốt, nhưng bây giờ tôi muốn tiêu diệt đồ thị thanh và tạo biểu đồ đường kẻ trong cùng một canvas. Tôi đã thử hai cách sau đây để xóa canvas:

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

grapharea.destroy(); 

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

Cách thứ hai:

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

grapharea.clear(); 

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

Tôi gọi đó là đúng không? OnButtonClick Tôi gọi chức năng này sử dụng cùng một khung hình.

Answer 1

Phương pháp chính xác để sử dụng, để có thể vẽ biểu đồ khác trên cùng một canvas, là .destroy(). Bạn phải gọi nó trên đối tượng biểu đồ đã tạo trước đó. Bạn cũng có thể sử dụng cùng một biến cho cả hai biểu đồ.

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

Straight từ docs (under Prototype Methods):

.destroy()

Sử dụng này để tiêu diệt bất kỳ trường hợp biểu đồ được tạo ra. 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.

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

Nó tuyên bố rõ ràng rằng phương pháp này phải được gọi trước khi vải có thể được tái sử dụng cho một biểu đồ mới.

.clear() cũng được đề cập sau trong cùng một phần với chức năng "sẽ xóa canvas biểu đồ. Được sử dụng rộng rãi bên trong giữa các khung hình động nhưng bạn có thể thấy hữu ích". Biểu đồ sẽ còn sống và sau khi gọi phương thức này, vì vậy đây không phải là phương thức để gọi, nếu bạn muốn sử dụng lại canvas cho biểu đồ mới.

Thành thật mà nói, tuy nhiên, trong những trường hợp như của bạn, tôi đã thường được sử dụng một container div quấn canvas của tôi và, bất cứ khi nào tôi cần phải tạo ra một biểu đồ mới, tôi đặt một yếu tố mới canvas trong div này. Sau đó tôi đã sử dụng canvas mới được tạo này cho biểu đồ mới. Nếu bạn từng gặp phải hành vi kỳ lạ, có thể liên quan đến các biểu đồ chiếm giữ khung hình trước biểu đồ hiện tại, cũng có cách tiếp cận này.

Answer 2

Tháo vải sau mỗi cuộc gọi biểu đồ, điều này làm việc cho tôi

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