javascript - 从 Canvas 中删除饼图并替换为另一个饼图

Question

我使用 Chart.js 在 Canvas 中创建圆环图

代码:

            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 = '';

然后在其中绘制一个新图表。