Wie werden alte Daten und alte Graphen in Chart.js gelöscht?

Ich verwende Chart.js, um ein Diagramm zu erstellen.Wie werden alte Daten und alte Graphen in Chart.js gelöscht?

Ich stoße auf ein Problem, wenn ich mein Diagramm verwende. Der alte Graph mit den alten Werten ist nicht verschwunden, wenn ich den Mauszeiger auf den Graphen halte. Laut dem Dokument habe ich versucht, .destroy() oder .clear() zu verwenden, um die alten Daten loszuwerden, aber es funktioniert nicht.

Hier sind die folgenden Codes:

<!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 und MP werden beide auf 100 Versuchen auf 1000 für HP. Dann setzen Sie den Cursor auf die Grafik und bewegen Sie sich im Kreis. Irgendwann wird das alte Diagramm angezeigt.

Quelle

2016-05-25 Lord Rixuel

Sie sollten nicht Diagramm erstellen, da diese nicht in v2 erlaubt ist, stattdessen müssen Sie die Daten ersetzen:

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

Quelle

2016-05-25 03:29:55 juvian

Vielen Dank , Ich wusste nicht, dass ich Diagramm nicht neu erstellen sollte –

Wie werden alte Daten und alte Graphen in Chart.js gelöscht?

Antwort

Verwandte Themen