node.js - 使用 Socket.io 填充 google Area Chart - 'google.visualization.DataTable is not a constructor'

Question

我使用 NodeJS 和 Socket.io 从数据库获取数据。我现在想用这些数据填充谷歌面积图，但我有点失败了。 数据作为对象传输。每个对象包含两个值(日期时间和值)。我将这些值附加到数组中，然后将它们存储在 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与 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'
        }
    })
}