admin管理员组文章数量:1355600
i am using the Chart Js to show bar char. 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
The Code is
<html>
<head>
<script src=".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=".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>
i am using the Chart Js to show bar char. 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
The Code is
<html>
<head>
<script src="http://code.jquery./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./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>
- Does this answer your question? Chartjs Bar Chart showing old data when hovering – Wai Ha Lee Commented May 13, 2020 at 5:55
1 Answer
Reset to default 9You can fix the issue by making var chart; global (put it right before your myFunction() call). Then your destroy should be if(chart) chart.destroy();
本文标签： javascriptChart Js Show the old data on mouse hoverStack Overflow
版权声明：本文标题：javascript - Chart Js Show the old data on mouse hover - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743984603a2571223.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论