使用Socket.io来填充谷歌区域图 – 'google.visualization.DataTable不是一个构造函数'
我使用NodeJS和Socket.io从数据库中获取数据。 我现在想用这些数据填写谷歌面积图,但我有点失败。 数据以Objects
forms传输。 每个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不是一个构造函数”。 那么我做错了什么?
问题是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' } }) }