如何摆脱图表中的旧数据和旧图形.js

我正在使用图表.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。然后将光标放在图表上并绕圈移动。有时，旧图表将显示。

您不应该重新创建图表，因为在 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>

相关内容

最新更新

热门标签：