Блог

я пытаюсь создать диаграмму, когда пользователи ищут, и это работает, но проблема в том, что при повторном поиске пользователя возникает ошибка: холст уже используется, и когда я пытаюсь его уничтожить, он выдает другую ошибку, в которой говорится, что уничтожение не является функцией, мне нужен способ изменить диаграмму, когда пользователь серачит без необходимости перезагрузки страницы

мой код

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

Проблема в том, что 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 будут выглядеть так, как показано ниже. Обратите внимание, что я устанавливаю labels и data на существующем графике и звоню myChart.update() после этого. Это самый чистый и эффективный способ работы с новыми данными. Для получения более подробной информации, пожалуйста, обратитесь к Обновлению диаграмм с chart.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   "amp;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')
    }
  });
});