图表Js，在选择时加载数据，但在悬停时也显示旧值的条形图

Question

我正在尝试动态更新图表。我通过另一个js的名称（#cellname）从数据库中获得了不同的值，而且data.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 {

    }
  });
});

我正在尝试动态更新图表。我通过另一个js的名称（#cellname）从数据库获得了不同的值，而且data.php（...

Answer 1

问题在于，旧图表仍存在于canvas中。不必在每次有新数据可用时都创建新图表，而只需将新值分配给labels和dataset，然后再分配给update the existing chart。