javascript - Chart.js 悬停时显示旧图表

Question

我的网页上有 3 个不同的图表，我正在使用 Chartjs。当我将鼠标悬停在其中一个图表上时，它开始显示旧数据，就会出现问题。我正在通过单击 HTML 按钮创建图表。我在 stackoverflow 上检查了一些答案(例如 destroy())，但这对我不起作用。下面是图表的函数。请在这方面指导我。

   <script>
         function dailyPrd1() {
            var pl_type1 = "";
            var pl_sl1 = "";
            var date1="";
            pl_type1 = plant_type1.options[plant_type1.selectedIndex].innerHTML;
            //alert(pl_type1);
            pl_sl1 = plant_select1.options[plant_select1.selectedIndex].innerHTML;
            //alert(pl_sl1);
            date1 = document.getElementById('date2').value;
            //alert(date1);
            var pl2 = "";
            pl2 = pl_type1 + '-' + pl_sl1;
            var obj2 = "";
            var hrs1 = [];
            var prod1 = [];
            var colr1 = [];
            var req2 = new XMLHttpRequest();           
            var config_string2 = '<%=ConfigurationManager.AppSettings["serverip11"].ToString() %>' + pl_sl1 + "/" + pl_type1 + "/" + date1;           
            req2.open("GET", config_string2, true);
            req2.send();
            req2.overrideMimeType("application/json");
            req2.onload = function () {                
                obj2 = JSON.parse(this.response);                
                obj2 = JSON.parse(obj2);

                var len12 = 0;
                len12 = obj2.day_list.length;                
                for (i = 0; i < len12; i++) {
                    hrs1.push(obj2.day_list[i].day);
                }
                var speedCanvas2 = document.getElementById("myChart3");
                Chart.defaults.global.defaultFontFamily = "Lato";
                Chart.defaults.global.defaultFontSize = 16;
                var chartOptions2 = {
                    responsive: true,
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Days'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Value in cu.m'
                            }
                        }]
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            boxWidth: 80,
                            fontColor: 'black'
                        }
                    }
                };

                var speedData2 = {
                    labels: hrs1,
                    // datasets: [dataFirst, dataSecond]
                };               
                var lineChart2 = new Chart(speedCanvas2, {
                    type: 'bar',
                    data: speedData2,
                    options: chartOptions2
                });
                var iti1 = 0;
                iti1 = obj2.prod_qty.length;

                var aaa = 'Pl 1'
                for (j = 0; j < iti1; j++) {
                    prod1.push(obj2.prod_qty[j].tot_prod);
                }
                    addData(lineChart2, pl2, getRandomColor(), prod1);
            }
        }            
    </script>

Answer 1

更改数据后，您应该使用 chartVariable.update() 更新图表。

I made a JSBin这解释了你如何使用它。

对您来说重要的函数是代码中的最后一个函数，addDataButton()，它由单击按钮触发。在此函数中，我添加新数据并随后更新我的图表。

在您的情况下，您应该使用 lineChart2，而不是 chartVariable 和 chart。

完整代码:

let numberOfDataCounter = 0 // Current data counter
const numberOfDataAtBeginning = 4 // data number to start with
const weekdays = ["Su", "Mo", "Du", "We", "Th", "Fr", "Sa"]

function randomNumber(){
  let randomNumber = Math.floor(Math.random()*100)
  return randomNumber
}

let chartData = {
  label: [],
  data: []
}

function addData (){
  chartData.label.push(weekdays[numberOfDataCounter % 7])
  chartData.data.push(randomNumber())

  numberOfDataCounter++
}

// Fill chart with data at beginning
while (numberOfDataAtBeginning>numberOfDataCounter) {
  addData()
}

let data = {
  labels: chartData.label,
  datasets: [{
    label: "Label",
    data: chartData.data
  }]
}

let chart = new Chart(document.getElementById("chart"), {
  type: 'line',
  data: data,  
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 100
        }
      }]
    }
  }
});

function addDataButton(){
  addData()
  chart.update()
}