Chart.js无刷新更新图表Canvas占用、destroy方法报错如何解决

• 你当前把图表实例myChart定义在AJAX请求success回调的局部作用域中，外部无法访问该实例，因此调用destroy方法时会抛出destroy is not function错误
• 每次提交表单都会在同一个<canvas>元素上重复创建新的Chart实例，自然会触发Canvas is already in use报错

将图表实例存储在全局作用域，每次新建实例前先销毁旧实例即可解决问题，完整修正代码如下：

var endpoint = "/api/chart/data";
// 将图表实例变量提升到全局作用域
var myChart = null;
myform.addEventListener("submit", function (e) {
  e.preventDefault();
  var name = document.querySelector("#name").value;
  var amount = document.querySelector("#amount").value;
  $.ajax({
    method: "GET",
    url: endpoint + "?name=" + name + "&amount=" + amount,
    success: function (data) {
      labels = data.labels;
      data = data.data;
      console.log("success");
      console.log(name);
      var ctx = document.getElementById("myChart").getContext("2d");
      // 新建实例前先判断旧实例是否存在，存在就先销毁
      if(myChart) {
        myChart.destroy();
      }
      myChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels:labels,
            datasets: [
                {
                    label: "# of Votes",
                    data: data,
                    backgroundColor: [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)",
                    ],
                    borderColor: [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)",
                    ],
                    borderWidth: 1,
                    borderRadius: 5,
                },
            ],
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    min: -100,
                    max: 100,

                    ticks: {
                        color: '#fff',
                    },
                    beginAtZero: true,
                },
                y: {
                    ticks: {
                        color: '#fff',
                    },
                    beginAtZero: true,
                },
            },
        },
    });
    },
    error:function(){
        console.error('enter valid data')
    }
  });
});

不需要每次销毁重建实例，直接更新已有实例的配置数据后调用update方法即可，性能更高，核心代码片段如下：

// 首次创建实例后，后续更新只需要修改以下内容
myChart.data.labels = newLabels; // 替换为新的labels数据
myChart.data.datasets[0].data = newData; // 替换为新的数值数据
myChart.update(); // 触发图表重新渲染

内容的提问来源于stack exchange，提问作者Super sub