时间戳

首页 > 解决方案 > 在不重新加载页面的情况下更新图表 js 中的图表

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

问题描述

我试图在用户搜索时创建一个图表并且它可以工作，但是当用户再次搜索时出现问题，它抛出未捕获的错误：画布已在使用中，当我尝试销毁它时，它抛出另一个错误说销毁不起作用，我需要一个用户搜索时无需重新加载页面即可更改图表的方法

我的代码

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')
    }
  });
});

标签： javascriptjquerychartschart.js

解决方案

问题是该myChart变量是在 AJAX函数的范围内声明的。success该变量仅在执行期间存在于函数体内。当用户执行新的搜索时，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 请求将如下所示。请注意，我在现有图表上设置了labelsand 并在之后调用。这是处理新数据的最干净、最有效的方法。有关更多详细信息，请参阅chart.js 文档中的更新图表。datamyChart.update()

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')
    }
  });
});

推荐阅读