我正在使用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();