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

Question

我使用NodeJS和Socket.io从数据库中获取数据。我现在想用这些数据填写谷歌区域图表，但我有点失败。 数据以Objects传输。每个Object包含两个值（日期时间和值）。我这些值追加到一个数组，然后将它们存储在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不是constructor' 。那么我做错了什么？

Answer 1

问题是drawChart被调用两次。
来自google.setOnLoadCallback和getData。
如果在google.setOnLoadCallback之前调用getData,
则不会识别google.visualization.DataTable。

另外，推荐使用loader.js与jsapi。
更多信息，请参见Load the Libraries ...

因此，请尝试以下...

替换...
<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' 
     } 
    }) 
}