Удалить круговую диаграмму из холста и заменить другую круговую диаграмму

Question

Im используя chart.js создать кольцевую диаграмму на холсте

Код:

  var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); 
      var pieChart = new Chart(pieChartCanvas); 

      var PieData = [ 
       { 
        value: 700, 
        color: "#f56954", 
        highlight: "#f56954", 
        label: "Chrome" 
       }, 
       { 
        value: 500, 
        color: "#00a65a", 
        highlight: "#00a65a", 
        label: "IE" 
       }, 
       { 
        value: 400, 
        color: "#f39c12", 
        highlight: "#f39c12", 
        label: "FireFox" 
       }, 
       { 
        value: 600, 
        color: "#00c0ef", 
        highlight: "#00c0ef", 
        label: "Safari" 
       }, 
       { 
        value: 300, 
        color: "#3c8dbc", 
        highlight: "#3c8dbc", 
        label: "Opera" 
       }, 
       { 
        value: 100, 
        color: "#d2d6de", 
        highlight: "#d2d6de", 
        label: "Navigator" 
       } 
      ]; 
      var pieOptions = { 
       segmentShowStroke: true, 
       segmentStrokeColor: "#fff", 
       segmentStrokeWidth: 1, 
       percentageInnerCutout: 50, 
       animationSteps: 100, 
       animationEasing: "easeOutBounce", 
       animateRotate: true, 
       animateScale: false, 
       responsive: true, 
       maintainAspectRatio: false, 
} 

<canvas id="pieChart"></canvas> 

Я хочу, чтобы удалить текущую круговую диаграмму и заменить он с новым, когда я нажимаю на элемент списка. Я попытался использовать метод destroy(), но он не имел никакого эффекта

<ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
    <li><a href="#" onclick="">Device</a></li> 
</ul> 

Может кто-нибудь помочь?

Answer 1

При нажатии кнопки в списке первой вы можете установить innerHtml пустым, чтобы удалить содержимое элемента диаграммы, как

document.getElementById('pieChart').innerHtml = ''; 

затем нарисовать новую карту в него.

Answer 2

Использование:

pieChartCanvas.clearRect(0, 0, canvasWidth, canvasHeight); 

Конечно, вы хотите, чтобы объявить переменные canvasWidth и canvasHeight.