2016-05-25 10 views
0

私はChart.jsを使ってグラフを作っています。Chart.jsの古いデータと古いグラフを取り除くにはどうすればいいですか?

グラフを使用すると問題が発生します。グラフ上にカーソルを置くと、古い値の古いグラフは消えません。ドキュメントによると、古いデータを取り除くために.destroy()または.clear()を使用しようとしましたが、動作しません。ここで

は、以下のコードです:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>hp mp</title> 
 
\t <meta charset="utf-8"> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
 
</head> 
 

 
<body onload="hpmpGraph()"> 
 
\t <script> 
 
\t \t function hpmpGraph() { 
 
\t \t \t var hp = document.hpmpForm.HP.value, 
 
\t \t \t \t mp = document.hpmpForm.MP.value, 
 
\t \t \t \t ctx = document.getElementById('hpmpratio').getContext('2d'); 
 
\t \t \t \t 
 
\t \t \t var \t data = { 
 
\t \t \t \t labels: ["HP","MP"], 
 
\t \t \t \t datasets: 
 
\t \t \t \t \t [{ 
 
\t \t \t \t \t \t data: [hp,mp], 
 
\t \t \t \t \t \t backgroundColor: ["#EF0000","#0000EF"], 
 
\t \t \t \t \t \t hoverBackgroundColor: ["#FF0000","#0000FF"] 
 
\t \t \t \t \t }] 
 
\t \t \t }; 
 
\t \t \t var options = {}; 
 

 
\t \t \t var myPieChart = new Chart(ctx, { 
 
\t \t \t \t type: 'pie', 
 
\t \t \t \t data: data, 
 
\t \t \t \t options: options 
 
\t \t \t }); 
 
\t \t } 
 
\t </script> 
 

 
\t <h1>HP & MP</h1> 
 
\t <form name=hpmpForm method=post> 
 
\t \t HP : <input type="text" name="HP" value="100"><br> 
 
\t \t MP : <input type="text" name="MP" value="100"><br> 
 
\t \t <button type="button" onClick="hpmpGraph();">Click</button> 
 
\t \t <h2>Pie graph</h2> 
 
\t \t <canvas id="hpmpratio" height="50"></canvas> 
 
\t </form> 
 
</body> 
 
</html>

HPとMPが100の試みで、両方のセットは、HP 1000を設定しています。次に、カーソルをグラフに置き、円の中を移動します。いつか、古いグラフが表示されます。

答えて

1

ことがV2で許可されていませんので、あなたは代わりに、あなたがデータを交換する必要があり、グラフを再作成するべきではありません。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>hp mp</title> 
 
\t <meta charset="utf-8"> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
 
</head> 
 

 
<body onload="hpmpGraph()"> 
 
\t <script> 
 
    \t var myPieChart = null 
 
     var config = {options:{},type:'pie'} 
 
\t \t function hpmpGraph() { 
 
\t \t \t var hp = document.hpmpForm.HP.value, 
 
\t \t \t \t mp = document.hpmpForm.MP.value, 
 
\t \t \t \t ctx = document.getElementById('hpmpratio').getContext('2d'); 
 
\t \t \t 
 
         config.data = { 
 
\t \t \t \t labels: ["HP","MP"], 
 
\t \t \t \t datasets: 
 
\t \t \t \t \t [{ 
 
\t \t \t \t \t \t data: [hp,mp], 
 
\t \t \t \t \t \t backgroundColor: ["#EF0000","#0000EF"], 
 
\t \t \t \t \t \t hoverBackgroundColor: ["#FF0000","#0000FF"] 
 
\t \t \t \t \t }] 
 
\t \t \t }; 
 
\t \t \t if(myPieChart == null){ 
 
          myPieChart = new Chart(ctx, config); 
 
         }else{ 
 
          myPieChart.update() 
 
         } 
 
     
 
     
 
\t \t } 
 
\t </script> 
 

 
\t <h1>HP & MP</h1> 
 
\t <form name=hpmpForm method=post> 
 
\t \t HP : <input type="text" name="HP" value="100"><br> 
 
\t \t MP : <input type="text" name="MP" value="100"><br> 
 
\t \t <button type="button" onClick="hpmpGraph();">Click</button> 
 
\t \t <h2>Pie graph</h2> 
 
\t \t <canvas id="hpmpratio" height="50"></canvas> 
 
\t </form> 
 
</body> 
 
</html>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>hp mp</title> 
 
\t <meta charset="utf-8"> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
 
</head> 
 

 
<body onload="hpmpGraph()"> 
 
\t <script> 
 
\t \t function hpmpGraph() { 
 
\t \t \t var hp = document.hpmpForm.HP.value, 
 
\t \t \t \t mp = document.hpmpForm.MP.value, 
 
\t \t \t \t ctx = document.getElementById('hpmpratio').getContext('2d'); 
 
\t \t \t \t 
 
\t \t \t var \t data = { 
 
\t \t \t \t labels: ["HP","MP"], 
 
\t \t \t \t datasets: 
 
\t \t \t \t \t [{ 
 
\t \t \t \t \t \t data: [hp,mp], 
 
\t \t \t \t \t \t backgroundColor: ["#EF0000","#0000EF"], 
 
\t \t \t \t \t \t hoverBackgroundColor: ["#FF0000","#0000FF"] 
 
\t \t \t \t \t }] 
 
\t \t \t }; 
 
\t \t \t var options = {}; 
 

 
\t \t \t var myPieChart = new Chart(ctx, { 
 
\t \t \t \t type: 'pie', 
 
\t \t \t \t data: data, 
 
\t \t \t \t options: options 
 
\t \t \t }); 
 
\t \t } 
 
\t </script> 
 

 
\t <h1>HP & MP</h1> 
 
\t <form name=hpmpForm method=post> 
 
\t \t HP : <input type="text" name="HP" value="100"><br> 
 
\t \t MP : <input type="text" name="MP" value="100"><br> 
 
\t \t <button type="button" onClick="hpmpGraph();">Click</button> 
 
\t \t <h2>Pie graph</h2> 
 
\t \t <canvas id="hpmpratio" height="50"></canvas> 
 
\t </form> 
 
</body> 
 
</html>

+0

をありがとうございました、私はチャートを作り直すべきではないことを知らなかった –

関連する問題