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>

Answer 1

您可以通过var chart;全局解决问题（在myFunction()来电之前将其放好）。然后你的毁灭应该是if(chart) chart.destroy();

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

1 个答案: