Verwenden Sie Socket.io, um Google Area Chart zu füllen - "google.visualization.DataTable ist kein Konstruktor"

Question

Ich benutze NodeJS und Socket.io, um Daten aus einer Datenbank zu erhalten. Ich möchte jetzt ein Google-Bereichsdiagramm mit diesen Daten füllen, aber ich versäume es irgendwie dabei. Die Daten werden als Objects übertragen. Jede Object enthält zwei Werte (Datum und Uhrzeit). Ich anfügen, diese Werte zu einem Array und speichern sie dann in ein DataTable:

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

var socket = io(); 
getData(); 

function drawChart(dataArray) { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'DateTime'); 
    data.addColumn('number', 'Value'); 
    for (var i = 0; i < dataArray.length; i += 2) { 
     console.log(dataArray[0]); 
     data.addRow([dataArray[i], dataArray[i + 1]]); 
    } 
    var chart = new google.visualization.AreaChart(document.getElementById('chart')); 
    chart.draw(data, { 
     title: "Data Visualization", 
     isStacked: true, 
     width: '50%', 
     height: '50%', 
     vAxis: { 
      title: 'Data v-Axis' 
     }, 
     hAxis: { 
      title: 'Data h-Axis' 
     } 
    }) 
} 

function getData() { 
    socket.emit('GET'); 
    socket.on('serverSent', function (data) { 
     var processedData = processData(data); 
     drawChart(processedData); 
    }) 
} 

function processData(data) { 
    var arr = new Array(); 
    jQuery.each(data, function (index, object) { 
     arr.push(object['datetime'], parseInt(object['value'])); 
    }) 
    return arr; 
} 

Wenn ich meine Website nenne ich das Diagramm sehen, aber ohne Werte und die Fehlermeldung `google.visualization.DataTable kein constructor' ist . Also, was mache ich falsch?

Answer 1

Das Problem ist drawChart wird zweimal aufgerufen.
Von google.setOnLoadCallback und getData.
Wenn getData vor google.setOnLoadCallback,
aufgerufen wird, wird google.visualization.DataTable nicht erkannt.

Zusätzlich wird empfohlen, loader.js vs. jsapi zu verwenden.
Siehe Load the Libraries für weitere Informationen ...

Als solches versuchen Sie bitte die folgenden ...

Ersetzen ...
<script src="https://www.google.com/jsapi"></script>

Mit ...
<script src="https://www.gstatic.com/charts/loader.js"></script>

Und versuchen Sie etwas wie ...

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

function init() { 
    var socket = io(); 
    socket.emit('GET'); 
    socket.on('serverSent', function (data) { 
     var processedData = processData(data); 
     drawChart(processedData); 
    }); 
} 

function drawChart(dataArray) { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'DateTime'); 
    data.addColumn('number', 'Value'); 
    for (var i = 0; i < dataArray.length; i += 2) { 
     console.log(dataArray[0]); 
     data.addRow([dataArray[i], dataArray[i + 1]]); 
    } 
    var chart = new google.visualization.AreaChart(document.getElementById('chart')); 
    chart.draw(data, { 
     title: "Data Visualization", 
     isStacked: true, 
     width: '50%', 
     height: '50%', 
     vAxis: { 
      title: 'Data v-Axis' 
     }, 
     hAxis: { 
      title: 'Data h-Axis' 
     } 
    }) 
}