使用Socket.io来填充谷歌区域图 – 'google.visualization.DataTable不是一个构造函数'

我使用NodeJS和Socket.io从数据库中获取数据。 我现在想用这些数据填写谷歌面积图，但我有点失败。 数据以Objectsforms传输。 每个Object包含两个值（date时间和值）。 我将这些值附加到数组，然后将它们存储在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; } 

如果我打电话给我的网站，我看到图表，但没有任何值和错误消息“google.visualization.DataTable不是一个构造函数”。 那么我做错了什么？

Answer 1

问题是drawChart被调用两次。
来自google.setOnLoadCallback和getData 。
如果在google.setOnLoadCallback之前google.setOnLoadCallback getData ，
那么google.visualization.DataTable将不被识别。

另外，build议使用loader.js和jsapi 。
请参阅加载库了解更多信息…

因此，请尝试以下…

更换…
<script src="https://www.google.com/jsapi"></script>

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

并尝试像…

 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' } }) }