Vải ChartJs hiển thị biểu đồ trước khi thay đổi Loại đồ thị

Question

Tôi gặp phải một sự cố duy nhất trong đó khi người dùng chọn từ trình đơn thả xuống và biểu đồ thay đổi nếu bạn quét qua khung hình trước đó sẽ hiển thị như một con ma trong nền. Tôi biết bạn có thể sử dụng một cái gì đó như graph.destroy() nhưng tôi không chắc chắn nếu đó là thích hợp và nơi để đặt nó.

mã nơi tôi cập nhật biểu đồ

var ctx = document.getElementById("myChart").getContext("2d"); 
    ctx.canvas.width = 600; 
    ctx.canvas.height = 200; 

    function updateChart() { 
     // ctx.canvas.destroy(); 
     var determineChart = $("#chartType").val(); 

     var params = dataMapMain[determineChart]; 
     if ([params.method] == "Pie") { 
      document.getElementById("subOption").hidden = false; 
      document.getElementById("arrowId").hidden = false; 

    var determineChart = $("#subOption").val(); 
      var params = dataMapSub[determineChart]; 
      $('#subOption').on('change', updateChart); 

      new Chart(ctx)[params.method](params.data, options, {}); 

     } 
     else { 
      document.getElementById("subOption").hidden = true; 
      document.getElementById("arrowId").hidden = true; 
      new Chart(ctx)[params.method](params.data, options, {}); 
     } 
    } 

    $('#chartType').on('change', updateChart) 
    updateChart(); 

fiddle Điều này cho thấy vấn đề này, di chuột qua biểu đồ để xem "ma".

Answer 1

Vì bạn không hủy các phiên bản Chart mà bạn không còn sử dụng nữa, biểu đồ đang vẽ nhiều biểu đồ vào cùng một bối cảnh canvas.

Bạn cần có tham chiếu đến số Chart trường hợp bạn new để có thể gọi destroy đối với chúng trước khi bạn new tạo một số khác.

Thêm phần này vào mã của bạn:

var ctx = document.getElementById("myChart").getContext("2d"); 
    ctx.canvas.width = 600; 
    ctx.canvas.height = 200; 

var chart; // assign your chart reference to this variable 

function updateChart() { 
    var determineChart = $("#chartType").val(); 

    var params = dataMapMain[determineChart]; 
    if ([params.method] == "Pie") { 
     document.getElementById("subOption").hidden = false; 
     document.getElementById("arrowId").hidden = false; 

var determineChart = $("#subOption").val(); 
     var params = dataMapSub[determineChart]; 
     $('#subOption').on('change', updateChart); 

     chart && chart.destroy(); // destroy previous chart 
     chart = new Chart(ctx)[params.method](params.data, options, {}); 

    } 
    else { 
     document.getElementById("subOption").hidden = true; 
     document.getElementById("arrowId").hidden = true; 

     chart && chart.destroy(); // destroy previous chart 
     chart = new Chart(ctx)[params.method](params.data, options, {}); 
    } 
} 

$('#chartType').on('change', updateChart) 
updateChart(); 

Và đây là một fiddle thể hiện việc sửa chữa.