【问题标题】：How to get rid of old data and of old graph in Chart.js?如何摆脱 Chart.js 中的旧数据和旧图表？
【发布时间】：2016-05-25 02:02:11
【问题描述】：
我正在使用Chart.js 制作图表。
我在使用图表时遇到问题。当我将光标悬停在图表上时，带有旧值的旧图表并没有消失。根据文档，我尝试使用 .destroy() 或 .clear() 来删除旧数据，但它不起作用。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>hp mp</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
</head>
<body onload="hpmpGraph()">
<script>
function hpmpGraph() {
var hp = document.hpmpForm.HP.value,
mp = document.hpmpForm.MP.value,
ctx = document.getElementById('hpmpratio').getContext('2d');
var data = {
labels: ["HP","MP"],
datasets:
[{
data: [hp,mp],
backgroundColor: ["#EF0000","#0000EF"],
hoverBackgroundColor: ["#FF0000","#0000FF"]
}]
};
var options = {};
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: options
});
}
</script>
<h1>HP & MP</h1>
<form name=hpmpForm method=post>
HP : <input type="text" name="HP" value="100"><br>
MP : <input type="text" name="MP" value="100"><br>
<button type="button" onClick="hpmpGraph();">Click</button>
<h2>Pie graph</h2>
<canvas id="hpmpratio" height="50"></canvas>
</form>
</body>
</html>
HP 和 MP 都设置为 100。尝试将 HP 设置为 1000。然后将光标放在图形上并沿圆圈移动。有时，旧图表会出现。
【问题讨论】：
标签：
javascript
html
graph
charts
chart.js
【解决方案1】：
您不应该重新创建图表，因为这在 v2 中是不允许的，而是您需要替换数据：
<!DOCTYPE html>
<html>
<head>
<title>hp mp</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
</head>
<body onload="hpmpGraph()">
<script>
var myPieChart = null
var config = {options:{},type:'pie'}
function hpmpGraph() {
var hp = document.hpmpForm.HP.value,
mp = document.hpmpForm.MP.value,
ctx = document.getElementById('hpmpratio').getContext('2d');
config.data = {
labels: ["HP","MP"],
datasets:
[{
data: [hp,mp],
backgroundColor: ["#EF0000","#0000EF"],
hoverBackgroundColor: ["#FF0000","#0000FF"]
}]
};
if(myPieChart == null){
myPieChart = new Chart(ctx, config);
}else{
myPieChart.update()
}
}
</script>
<h1>HP & MP</h1>
<form name=hpmpForm method=post>
HP : <input type="text" name="HP" value="100"><br>
MP : <input type="text" name="MP" value="100"><br>
<button type="button" onClick="hpmpGraph();">Click</button>
<h2>Pie graph</h2>
<canvas id="hpmpratio" height="50"></canvas>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>hp mp</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
</head>
<body onload="hpmpGraph()">
<script>
function hpmpGraph() {
var hp = document.hpmpForm.HP.value,
mp = document.hpmpForm.MP.value,
ctx = document.getElementById('hpmpratio').getContext('2d');
var data = {
labels: ["HP","MP"],
datasets:
[{
data: [hp,mp],
backgroundColor: ["#EF0000","#0000EF"],
hoverBackgroundColor: ["#FF0000","#0000FF"]
}]
};
var options = {};
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: options
});
}
</script>
<h1>HP & MP</h1>
<form name=hpmpForm method=post>
HP : <input type="text" name="HP" value="100"><br>
MP : <input type="text" name="MP" value="100"><br>
<button type="button" onClick="hpmpGraph();">Click</button>
<h2>Pie graph</h2>
<canvas id="hpmpratio" height="50"></canvas>
</form>
</body>
</html>