图表.js - 鼠标悬停时重新启动值

Question

I using chart.js 用于显示响应数据。一切都在分开 1 件事...当我的鼠标在图表上时，图表加载第一个数据。 有人知道如何解决这个问题吗？

图表.js我使用的代码：

$(function() {
setTimeout(function() {
x = 2328;
y = 5567;
z = 12334;
loadChart();}, 1000 );
$("#today").on('click',function(){
x = 8;
y = 7;
z = 54;
loadChart();
});
$("#yersterday").on('click',function(){
x = 28;
y = 37;
z = 80;
loadChart();
});$("#month").on('click',function(){
x = 178;
y = 172;
z = 824;
loadChart();
});$("#lastmonth").on('click',function(){
x = 568;
y = 507;
z = 1214;
loadChart();
});
function loadChart(){
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Deskop", "Tablet", "Mobile"],
datasets: [
{
label: "Page views",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [x,y,z]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Page views (since lunch)'
}
}
});
}

});

通常，我使用ajax调用从数据库中获取json数据内容，但为了让您更好地了解我的问题，我创建了小提琴： 因此，在更改图表数据和鼠标悬停图表之后，您将明白我的意思。

小提琴：这里

和狙击手：

$(function() {
			setTimeout(function() {

			x = 2328;
			y = 5567;
			z = 12334;
			loadChart();}, 1000 );
			
		$("#today").on('click',function(){
			x = 8;
			y = 7;
			z = 54;
			loadChart();
		});
$("#yersterday").on('click',function(){
			x = 28;
			y = 37;
			z = 80;
			loadChart();
		});$("#month").on('click',function(){
			x = 178;
			y = 172;
			z = 824;
			loadChart();
		});$("#lastmonth").on('click',function(){
			x = 568;
			y = 507;
			z = 1214;
			loadChart();
		});
		function loadChart(){
		new Chart(document.getElementById("bar-chart"), {
		type: 'bar',
		data: {
			labels: ["Deskop", "Tablet", "Mobile"],
			datasets: [
		{
		 label: "Page views",
		backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
		data: [x,y,z]
		}
			]
		},
		options: {
		legend: { display: false },
		title: {
		display: true,
		text: 'Page views (since lunch)'
		}
		}
		});
	}
});

[class*="col-"] {
	box-sizing: border-box;
	display: inline-block;
float: left;
padding: 5px;
margin: 0 auto;
text-align: center;
}
h5{
cursor:pointer;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="col-8" style="height: 400px"><canvas id="bar-chart" width="100%" height="40px"></canvas></div>
			<div class="col-4" id="today" style="height: 50px" ><h5>today</h5></div>
			<div class="col-4" id="yersterday" style="height: 50px" ><h5>yersterday </h5></div>
			<div class="col-4" id="month" style="height: 50px" ><h5>this month</h5></div>
			<div class="col-4" id="lastmonth" style="height: 50px" ><h5>last month</h5></div>

Answer 1

你必须销毁之前的图表。您可以通过为图表声明变量来执行此操作。请参阅下面的代码，变量"myChart"具有魔力。

$(function() {
var myChart = null;
setTimeout(function() {
x = 2328;
y = 5567;
z = 12334;
loadChart();}, 1000 );
$("#today").on('click',function(){
x = 8;
y = 7;
z = 54;
loadChart();
});
$("#yersterday").on('click',function(){
x = 28;
y = 37;
z = 80;
loadChart();
});$("#month").on('click',function(){
x = 178;
y = 172;
z = 824;
loadChart();
});$("#lastmonth").on('click',function(){
x = 568;
y = 507;
z = 1214;
loadChart();
});
function loadChart(){
// if the chart is not undefined (e.g. it has been created)
// then destory the old one so we can create a new one later
if (myChart) {
myChart.destroy();
}
myChart = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Deskop", "Tablet", "Mobile"],
datasets: [
{
label: "Page views",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [x,y,z]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Page views (since lunch)'
}
}
});
}

});