Question

我在使用Chartjs的网页上有3个不同的图表。当我将鼠标悬停在其中一张图表上时，就会开始显示旧数据，从而出现问题。我在单击HTML按钮时创建图表。我检查了关于stackoverflow的几个答案（例如destroy（）），但这对我不起作用。以下是图表的功能。请为此指导我。

java -Xdebug -Xrunjdwp:transport=dt_socket,server=y,address=8000 <YourAppName>

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

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

1 个答案: