Question

我使用Chart.js制作图表。

我使用图表时遇到问题。当我将光标悬停在图表上时，带有旧值的旧图形不会消失。根据文档，我尝试使用.destroy（）或.clear（）来删除旧数据，但它不起作用。

以下是以下代码：

＆＃13;

<!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>

＆＃13;

HP和MP都设置为100.尝试为HP设置1000。然后将光标放在图表上并移动到圆圈中。有时，旧图表会显示出来。

Answer 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>

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

1 个答案: