按下按钮时如何重新加载jQuery元素

Question

我有一个生成图表的按钮（使用Chart.js）：

<canvas id="graph"></canvas>

<script>
    $("#button").click(function() {
        let ctx = $("#graph");
        let myChart = new Chart(ctx, {/* My nice graph. */});
    });
</script>

但每次按下按钮时，都会在旧图上方创建一个新图。所以我有很多图表。使用 jQuery，我需要在每次按下按钮时删除或清空图形元素并重新创建它。

Answer 1

你可以像这样先销毁它：

<canvas id="graph"></canvas>

<script>
    let myChart;

    $("#button").click(function() {
        if(Chart.getChart(myChart)) {
          myChart.destroy();
        }

        let ctx = $("#graph");
        myChart = new Chart(ctx, {/* My nice graph. */});
    });
</script>