如何在按下按钮时重新加载 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>

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

How to reload a jQuery element when a button is pressed

jquery

jquery-selectors

chart.js