在不重新加载页面的情况下更新图表 js 中的图表

Question

我试图在用户搜索时创建一个图表并且它有效但是当用户再次搜索时出现问题它抛出未捕获错误：Canvas 已在使用当我试图销毁它时它抛出另一个错误说destroy 不起作用，我需要一种方法来在用户搜索时更改图表而无需重新加载页面

我的代码

var endpoint = "/api/chart/data";
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");
    var 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')
    }
  });
});

Answer 1

问题是 myChart 变量是在 AJAX success 函数的 scope 中声明的。变量仅在函数执行期间存在于函数体内。当用户执行新的搜索时，再次调用 success 函数，但最初创建的 myChart 变量不再存在。

您可以通过在全局范围的开头创建 myChart 来解决您的问题，如下所示。

var myChart = new Chart('myChart', {
  type: "bar",
  data: {
    labels: [], // initialize with an empty array
    datasets: [{
      label: "# of Votes",
      data: [], // initialize with an empty array
      ...
});

您的事件侦听器和 AJAX 请求将如下所示。请注意，我在现有图表上设置了 labels 和 data，然后调用 myChart.update()。这是处理新数据的最干净、最有效的方式。有关详细信息，请参阅 chart.js 文档中的 Updating Charts。

var endpoint = "/api/chart/data";
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) {
      myChart.data.labels = data.labels;
      myChart.data.datasets[0].data = data.data;
      myChart.update();
    },
    error: function() {
      console.error('enter valid data')
    }
  });
});

在不重新加载页面的情况下更新图表 js 中的图表

update chart in chart js without reloading the page

javascript

jquery

charts

chart.js