如何在按钮点击时重载jQuery元素，解决Chart.js重复生成图表问题

问题原因 #

每次点击按钮直接新建Chart实例时，旧的图表实例没有被销毁，canvas上还残留了之前的绘制内容，所以会出现多图重叠的问题。

最优修复方案（官方推荐） #

调用Chart.js内置的destroy()方法清理旧实例，再创建新图表即可：

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

<script>
// 全局声明变量存储图表实例
let myChart = null;
$("#button").click(function() {
    // 已存在实例时先销毁
    if (myChart) {
        myChart.destroy();
    }
    let ctx = $("#graph");
    myChart = new Chart(ctx, {/* 你的图表配置 */});
});
</script>

备选方案：无需维护全局实例 #

如果不想额外声明全局变量存储实例，可以给canvas套一层父容器，每次点击时清空父容器后重新插入canvas元素：

<!-- 新增canvas父容器 -->
<div id="graph-wrap">
    <canvas id="graph"></canvas>
</div>

<script>
$("#button").click(function() {
    // 清空父容器后重新插入canvas
    $("#graph-wrap").empty().append('<canvas id="graph"></canvas>');
    let ctx = $("#graph");
    let myChart = new Chart(ctx, {/* 你的图表配置 */});
});
</script>

内容的提问来源于stack exchange，提问作者Roby Sottini