Charts.js 销毁之前的数据并更新

Question

这似乎是charts.js 的一个常见问题。我创建了一个允许您选择日期的网站。当您单击特定日期时，会根据该日期的 csv 文件更新折线图。如果您然后单击新日期，chart.js 折线图会更新，但如果您浏览数据，它会简要显示以前的日期数据。

我之前看到过很多关于此的问题，并尝试使用 .destroy() 来更新图表，但每次我将它添加到代码的任何点时，画布都会被破坏并且图表是从未创造。

HTML：

<div class="chooseGame">
   <button onclick="dropDownFunction()" class="gameDropDown">Select a Game Date & Time</button>
   <div id="dropdown" class="dates"></div>
</div>

JS:

function dropDownFunction() {
  document.getElementById("dropdown").classList.toggle("show");
}

window.onclick =
function(event) {
  if (!event.target.matches('.gameDropDown')) {
    var dropdowns = document.getElementsByClassName("dates");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


$(document).on("click", ".test",function(e){
var selectedDate= ($(this).text())

document.getElementById("today").innerText = selectedDate;


var cFD = document.getElementById('Canvas').getContext('2d');
var backgroundFD = document.getElementById('fDChart').style.background='white';

FirstData = new Chart(cFD, {
    type: 'line',
    data: {
      labels: fdgameArray,
      datasets: [{
          label: 'New',
          backgroundColor: "#f15a22",
          borderColor: "#f15a22",
          data: fdNewData,
          fill: false,
      },
        {
          label: 'Completed',
          backgroundColor: "#004684",
          borderColor: "#004684",
          data: fdCompData,
          fill: false,
        },
          {
            label: 'Oustanding',
            fontColor: '#a7b1c2',
            borderColor: '#a7b1c2',
            data: fdOutData,
            fill: false,
          }]
  },
  options: {
        responsive: true,
        title:{
          display:false,
          text: 'Delta Club',
          fontSize: 15,
          fontFamily: 'Arial',
          fontColor: '#004684'
        },
        tooltips:{
          mode: "index",
          intersect: false,
        },
        hover:{
          mode:"nearest",
          intersect: true
        },
        scales:{
          xAxes:[{
            display: true,
            ticks:{
              fontColor:'#004684',
              fontSize: 10
            },
            scaleLabel:{
              display: true,
              labelString: "Time",
              fontColor:'#004684',
              fontSize: 12
            }
          }],
          yAxes:[{
            display: true,
            ticks:{
              fontColor:'#004684',
              fontSize: 10,
              beginAtZero: true,
              steps: 10,
              stepValue: 1,
              Max: 100
            },
            scaleLabel:{
              display: true,
              labelString: "# Orders",
              fontColor:'#004684',
              fontSize: 12
            }
          }]
        }

    }})
  };

每当您更改日期并将鼠标悬停在图表上时，都会显示上一个日期的数据，然后恢复为当前选定的日期。我希望始终显示当前数据。

Answer 1

我实际上能够调整以下内容，现在一切就绪：

var cFD = document.getElementById('Canvas').getContext('2d');
var backgroundFD = document.getElementById('firstDataChart').style.background='white';
if(window.chart && window.chart !== null){
        window.chart.destroy();
    }
window.chart = new Chart(cFD, {...})