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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Chart Js显示鼠标悬停时的旧数据相关的知识,希望对你有一定的参考价值。

我正在使用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>
答案

你可以通过使var chart;全局(在你的myFunction()调用之前把它放好)来解决这个问题。然后你的毁灭应该是if(chart) chart.destroy();

以上是关于Chart Js显示鼠标悬停时的旧数据的主要内容,如果未能解决你的问题,请参考以下文章

悬停时如何在chart.js中的特定点添加水平线?

鼠标悬停时的SVG工具提示?

悬停时突出显示winforms MS Chart线

Highchart在图例鼠标悬停中间显示文本

为chart.js中的水平条添加值

设置Chart.js默认显示Point点的值不用鼠标经过才显示