Wie lösche ich das Diagramm, bevor ich neue Daten hinzufüge?

Question

Ich verwende die Google Visualization API. Ein Diagramm wird basierend auf den Werten eines Ajax-Aufrufs function drawchart() generiert.

Der Benutzer gibt dann Werte in Textfelder ein und dieser Punkt wird auch in das Diagramm eingefügt (function addUserPoint()). function addUserPoint2() wird automatisch generiert und auch auf der Karte hinzugefügt. Das Ergebnis von adduserpoint und adduserpoint2 hat eine Linie zwischen ihnen.

Mein Problem: Wenn der Benutzer erneut einen neuen Punkt hinzufügt, fügt das Diagramm diese Werte hinzu und die zuvor hinzugefügten Punkte bleiben im Diagramm. Ich möchte die Ergebnisse von adduserpoint und adduserpoint2 loswerden, bevor ich einen neuen Punkt hinzufüge. Wie kann ich das erreichen?

var chartData; 
var options2; 

function addUserPoint() { 
if (chartData.getNumberOfColumns() === 2) { 
    chartData.addColumn('number', ''); 
} 
var aa= $("#wbtotala").text(); 
var bb= $("#wbtotalb").text(); 
    chartData.addRow([ 
    parseFloat(bb), 
    null, 
    parseFloat(aa) 
    ]); 
    myLineChart.draw(chartData, options2); 
} 

function addUserPoint2(){ 
if (chartData.getNumberOfColumns() === 2) { 
    chartData.addColumn('number', ''); 
} 
myLineChart.draw(0,0, options2); 
var aa2 = fweight; 
var bb2= fcg; 

    chartData.addRow([ 
    parseFloat(bb2), 
    null, 
    parseFloat(aa2) 
    ]); 
    myLineChart.draw(chartData, options2); 
} 

function drawchart() { 
document.getElementById('addPoint').addEventListener('click', addUserPoint, false); 
document.getElementById('addPoint').addEventListener('click', addUserPoint2, false); 
     chartData = new google.visualization.DataTable(); 
     chartData.addColumn('number', 'Sli'); 
     chartData.addColumn('number', 'Weight'); 

     for (var i = 0; i < chartdatax.length; i++) { 
      chartData.addRow([parseFloat(chartdatax[i]), parseFloat(chartdatay[i])]); 
      }; 


     options2 = { 
      height: 500, 
      hAxis: { 
       title: 'AB', 
       gridlines: { 
       count: 20 
      } 
      }, 
      vAxis: { 
       title: 'CD', 
       gridlines: { 
       count: 15 
      } 
      }, 
      chartArea: {top:40, width: "70%", height: "75%"}, 

      legend: { position: 'none' }, 
      pointSize: 5 
     }; 

     myLineChart = new google.visualization.LineChart(document.getElementById('myChart2')); 

     myLineChart.draw(chartData, options2); 
} 

Answer 1

Setzen Sie chartData auf ein leeres Objekt in addUserPoint();

function addUserPoint() { charData = {}; if (chartData.getNumberOfColumns() === 2) { ... } }

Dies stellt sicher, dass Sie jederzeit eine neue Daten hinzufügen, werden die vorhergehenden Daten löscht und Sie haben einen frischen neuen Datensatz;)