Диаграмма Js, загрузка данных при выборе, но гистограмма, отображающая старые значения, а также при зависании - PullRequest
Новая
       36

Диаграмма Js, загрузка данных при выборе, но гистограмма, отображающая старые значения, а также при зависании

0 голосов
/ 03 мая 2020

Я пытаюсь динамически обновить график. Я получил разные значения из базы данных через другое js для имени (#cellname), также есть имя ячейки и пропускная способность в данных. php (который вызывается ajax).

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

$(document).ready(function() {
  function load_stats(id) {
    $.ajax({
      url: "http://localhost/visx/data.php",
      method: "GET",
      data: {
        id: id
      },
      dataType: "JSON",
      success: function(data) {
        console.log(data);

        // variable declaration
        var date = [];
        var cellname = [];
        var throughputs = [];

        // Store database values to Variables
        for (var i in data) {
          date.push(data[i].starttime);
          cellname.push(data[i].cellname);
          throughputs.push(data[i].thrp_bits_dl);    
        }

        // Creating Chart
        var ctx = document.getElementById('VF_Requests').getContext('2d');
        var chart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: date,
            datasets: [{
              // label:,
              backgroundColor: 'rgb(174,199,232)',
              data: throughputs,
            }]
          },
        });
      },
    });
  }

  // load function
  $('#cellname').click(function() {
    var id = $('#cellname option:selected').val();
    if (id != '') {
      load_stats(id);
    } else {

    }
  });
});

1 Ответ

0 голосов
/ 03 мая 2020

Проблема в том, что старый график все еще присутствует в canvas. Вместо того, чтобы создавать новую диаграмму каждый раз, когда доступны новые данные, вы должны просто присвоить новые значения labels и dataset, а затем обновить существующую диаграмму .

. Итак, вы определите глобальную переменную chart и измените свой код следующим образом: 

var chart;
function load_stats(id) {
  $.ajax({
      ...

      if (chart) {
        // Updating Chart
        chart.data.labels = date;
        chart.data.datasets[0].data = throughputs;  
        chart.update();
      } else {
        // Creating Chart
        chart = new Chart('VF_Requests', {
          type: 'bar',
          data: {
            labels: date,
            datasets: [{
              backgroundColor: 'rgb(174,199,232)',
              data: throughputs
            }]
          }
        });
      }
    },
  });
}
...