图表Js，在选择时加载数据，但在悬停时也显示旧值的条形图 [英] Chart Js , loading data on selection but bar graph displaying old values as well on hovering

问题描述

我正在尝试动态更新图表.我通过另一个js的名字(#cellname)从数据库中获得了不同的值，而且data.php(由ajax调用)中存在单元名和吞吐量相互冲突的问题.

I am trying to dynamically update the chart. I have got different values from the database via another js for name (#cellname) also there is cellname and throughput against each other in data.php (which is being called by ajax).

每当做出新选择时，下面的脚本运行都很好，除了当我在图形上移动鼠标时，它也显示旧图形，因此我缺乏使用图表更新功能的方法.

Whenever new selection is made the below script is running fine except when i move mouse on the graph it displays old graph as well, somehow i am lacking to use the chart update function.

$(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 {

    }
  });
});

推荐答案

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

The problem is that the old chart is still present in the canvas. Instead of creating a new chart each time new data is available, you should simply assign the new values to labels and the dataset and then update the existing chart.

为此，您将定义一个全局变量 chart 并按如下所示更改代码:

To do so, you'll define a global variable chart and change your code as follows:

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
            }]
          }
        });
      }
    },
  });
}

这篇关于图表Js，在选择时加载数据，但在悬停时也显示旧值的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！