Socket.ioを使用してGoogleエリアチャートを埋める - 'google.visualization.DataTableはコンストラクタではありません'

Question

NodeJSとSocket.ioを使ってデータベースからデータを取得します。私は今これらのデータを持つGoogleのエリアチャートを記入したいが、私はそれを行うに失敗します。 データはObjectsとして送信されます。各Objectには、2つの値（datetimeとvalue）が含まれています。私は配列にこれらの値を追加し、その後DataTableに保存： `google.visualization.DataTableはconstructor'

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; 
} 

私は私のウェブサイトは、私はチャートを参照してくださいが、任意の値と、エラーメッセージなしで呼び出した場合ではありません。だから私は間違って何をしていますか？

Answer 1

問題はdrawChartが2回呼び出されています。
google.setOnLoadCallbackとgetDataの両方から。
google.setOnLoadCallbackより前にgetDataが呼び出された場合、
の場合、google.visualization.DataTableは認識されません。

さらに、loader.jsとjsapiを使用することをお勧めします。
は...
<script src="https://www.gstatic.com/charts/loader.js"></script>

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

を交換し

... ...

そのため、次のことを試してみてください詳細はLoad the Librariesを参照してください。そして、何かを試してみてください...

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