使用 Socket.io 填充 google 面积图 - '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 不是构造函数”。那我做错了什么？

Answer 1

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

另外，建议使用loader.js vs. 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'
        }
    })
}