Chart Js显示鼠标悬停时的旧数据

Question

我正在使用Chart Js来显示条形码。我需要使用的数据因下拉而异。我的图表工作正常，除非用户从下拉菜单中选择一个不同的选项并且画布重新加载新数据时，鼠标上方的旧选择数据与当前数据之间存在毛刺和画布跳跃

我环顾四周来解决这个问题，并找到了以下方法

ChartJs showing old Data on mouse over但它没有用

守则是

    <html>
  <head>
     <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
   <style type="text/css">
    #ctx{max-width: 700px;
      width:700px; 
      height: 350px;
      max-height: 350px;}

  </style>  
  </head>
  <body>
Please select : <select id="mySelect" onchange="myFunction()">
  <option value="Please Select">Please Select</option>
  <option value="C001"> 001
  <option value="C002"> 002
  <option value="C003"> 003

</select>

<p id="demo"></p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" ></canvas>
  <script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
    creatGraph(x);
}
function GetMyData(Id)
{

 var data;
 switch(Id) {
        case "C001":// consultant 001
      data =  {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: ' Site 0',
         data: [2056, 544, 122, 40, 50, 14,12, 12, 22, 28],
         backgroundColor: '#22aa99'
      }, {
         label: ' Site 1',
         data: [670, 228, 42, 8, 26, 10, 8,0 , 8, 18],
         backgroundColor: '#994499'
      }, {
         label: ' Site 101',
         data: [],
         backgroundColor: '#316395'
      }, {
         label: ' Site 2',
         data: [6, 4],
         backgroundColor: '#b82e2e'
      }, {
         label: 'Site 3',
         data: [],
         backgroundColor: '#66aa00'
      }, {
         label: ' Site 4',
         data: [],
         backgroundColor: '#dd4477'
      }]
   };
   break ; 
        break;
        case "C002": //  002
        data =  {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: ' Site 0',
         data: [558, 158, 82, 48, 8, 12, 14, 8, 12, 0],
         backgroundColor: '#22aa99'
      }, {
         label: ' Site 1',
         data: [306, 96, 28, 4, 14, 4, 2,2 , 0, 4],
         backgroundColor: '#994499'
      }, {
         label: ' Site 101',
         data: [],
         backgroundColor: '#316395'
      }, {
         label: ' Site 2',
         data: [2,,,4],
         backgroundColor: '#b82e2e'
      }, {
         label: ' Site 3',
         data: [],
         backgroundColor: '#66aa00'
      }, {
         label: ' Site 4',
         data: [],
         backgroundColor: '#dd4477'
      }]
   };
        break;
        case "C003": // consultant 003
        data =  {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: ' Site 0',
         data: [1046, 526, 138, 194, 72, 54, 20, 10, 8, 32],
         backgroundColor: '#22aa99'
      }, {
         label: ' Site 1',
         data: [742, 214, 56, 86, 18, 16, 8, 12, 10, 10],
         backgroundColor: '#994499'
      }, {
         label: ' Site 101',
         data: [],
         backgroundColor: '#316395'
      }, {
         label: ' Site 2',
         data: [8, 6, , , 2, , ,2],
         backgroundColor: '#b82e2e'
      }, {
         label: ' Site 3',
         data: [],
         backgroundColor: '#66aa00'
      }, {
         label: ' Site 4',
         data: [],
         backgroundColor: '#dd4477'
      }]
   };
        break;
        default:// no data
         data =  {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      datasets: [{
         label: ' Site 0',
         data: [],
         backgroundColor: '#22aa99'
      }, {
         label: ' Site 1',
         data: [],
         backgroundColor: '#994499'
      }, {
         label: ' Site 101',
         data: [],
         backgroundColor: '#316395'
      }, {
         label: ' Site 2',
         data: [],
         backgroundColor: '#b82e2e'
      }, {
         label: ' Site 3',
         data: [],
         backgroundColor: '#66aa00'
      }, {
         label: ' Site 4',
         data: [],
         backgroundColor: '#dd4477'
      }]
   };
    }

  return data;  
}
function creatGraph(Consultant_Id)
{
var Data =  GetMyData(Consultant_Id);
if (chart) chart.chart.destroy();

var chart = new Chart(ctx, {
   type: 'bar',
   data: Data,
   options: {

      responsive: true,
      //maintainAspectRatio: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});

}

  </script>
  </body>
</html>