Chart.js显示悬停时的旧图表

Question

我在使用Chartjs的网页上有3个不同的图表。当我将鼠标悬停在其中一张图表上时，就会开始显示旧数据，从而出现问题。我在单击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()，该功能通过单击按钮触发。在此功能中，我添加新数据并在此之后更新图表。

在您的情况下，应使用chartVariable代替chart和lineChart2。

完整代码：

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()
}