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