Aktualisiere Daten von bereits instanziierten Diagrammen

Question

Ich benutze die Google Charts und ich muss eine Karte aktualisieren, die bereits instanziiert ist als eine Karte, die tatsächlich gewünscht wird, wenn Sie auf die Schaltfläche zum Aktualisieren der Daten innerhalb einer Karte klicken.

Heute habe ich in der folgenden Art und Weise tue:

var dataGraf = google.visualization.arrayToDataTable(parsVal); 
var chart = document.getElementById('curve_chart'); 
chart.draw(dataGraf); 

Aber nichts passiert. Für i meine Karte instanziiert benutzte ich die folgenden Befehle:

google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = google.visualization.arrayToDataTable(parsVal); 
    var options = { 
    title: 'Membros x Visitantes', 
    curveType: 'function', 
    legend: { position: 'bottom' } 
    }; 
var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
chart.draw(data, options); 
} 

Wie kann ich aktualisieren tun, nur, wenn ich auf die Schaltfläche klicken. Daran erinnern, dass mein AtaGraf mein Array mit den neuen Werten hat.

Ich habe eine JsFiddle um mein Problem zu veranschaulichen.

Answer 1

erste ...
google.charts.load & setOnLoadCallback sollte nur einmal pro Seite Last
Sie können, umfassen die in der load Anweisung

nächstes aufgerufen werden, callback durch einen Verweis auf die ursprüngliche chart speichern, können Sie von einem Daten-Set animieren zu einem anderen

auf den Button klicken, erstellen data und rufen draw

auch nicht Hinzufügen von Event-Handler direkt in HTML-Tags

siehe folgende Arbeits Schnipsel, werden die Daten "ausgelagert" auf jede Taste klicken ...

google.charts.load('current', { 
 
    callback: function() { 
 
    // draw first chart 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Data', 'Membros', 'Visitantes'], 
 
     ['1', 4, 6], 
 
     ['2', 5, 7] 
 
    ]); 
 

 
    var options = { 
 
     animation: { 
 
     startup: true, 
 
     duration: 1200, 
 
     easing: 'linear' 
 
     }, 
 
     title: 'Membros x Visitantes', 
 
     curveType: 'function', 
 
     legend: { position: 'bottom' } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
 
    chart.draw(data, options); 
 

 
    // draw same chart with new data on button click 
 
    var newData = null; 
 
    document.getElementById('chart_button').addEventListener('click', drawNewChart, false); 
 
    function drawNewChart() { 
 
     // switch between newData and data on each click 
 
     if (newData === null) { 
 
     newData = google.visualization.arrayToDataTable([ 
 
      ['Data', 'Membros', 'Visitantes'], 
 
      ['1', 9, 2], 
 
      ['2', 1, 7] 
 
     ]); 
 
     chart.draw(newData, options); 
 
     } else { 
 
     chart.draw(data, options); 
 
     newData = null; 
 
     } 
 
    } 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<button id="chart_button">Atualizar gráficos</button> 
 
<div id="curve_chart"></div>