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

Question

i am using the Chart Js to show bar char.我正在使用 Chart Js 来显示条形图。 the data that i need to use is different depending the drop down.我需要使用的数据因下拉菜单而异。 my chart work fine except when the user select a different option from drop down and the canvas get reloaded with the new data, on the mouse over there is glitch and canvas jumping between the old selected data and the current one我的图表工作正常，除了当用户从下拉菜单中选择不同的选项并且画布重新加载新数据时，鼠标悬停在旧选定数据和当前数据之间时出现故障和画布跳跃

i have look around to fix this issue, and found the following method我四处寻找解决这个问题，并找到了以下方法

ChartJs showing old Data on mouse over but it did not work ChartJs 在鼠标悬停时显示旧数据，但它不起作用

The Code is代码是

    <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

You can fix the issue by making var chart;您可以通过制作var chart; global (put it right before your myFunction() call).全局（将其放在myFunction()调用之前）。 Then your destroy should be if(chart) chart.destroy();那么你的销毁应该是if(chart) chart.destroy();

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

问题描述

1 个解决方案

解决方案1
8 已采纳 2018-03-02 20:53:32

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

问题描述

1 个解决方案

解决方案1 8 已采纳 2018-03-02 20:53:32

解决方案1
8 已采纳 2018-03-02 20:53:32