使用 jQuery 在计时器上使用 ajax 更新谷歌图表答案

【问题标题】：Updating a google chart with ajax on a timer using jQuery使用 jQuery 在计时器上使用 ajax 更新谷歌图表
【发布时间】：2016-06-30 07:29:52
【问题描述】：

我有一个图表，我想将值附加到使用来自 ajax 调用的 json 响应。我创建了一个返回 1 到 20 之间的随机数的 API，我想将响应插入到谷歌图表中作为下一个值。

到目前为止，这是我的代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300};
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    $.ajax({
        url: '/api.php',
        type: 'POST',
        data: {
            function: 'entityTrack',
            data: {
            }
        },
        error: function() {
            alert('An error occurred connecting to server. Please check your network');
        },
        dataType: 'json',
        success: function(json) {
            if (json.status) {
                data.addRows([
                    ['Mushrooms', json.data.entityTrack]
                ]);
            }else{
                alert(json.message);
            }
        }
    });
    console.log(data);
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    setTimeout(drawChart, 5000);
}
</script>
<div id="chart_div"></div>

我的图表以文本“无数据”呈现。在我的控制台日志中，我每 5 秒收到一次 console.log(data) 输出，它显示了我的 API 提供的当前值。此外，它不会附加数据，它会覆盖它。

当我将声明语句用于函数外部的数据时，我遇到了 DataTable is not defined 控制台错误。非常感谢任何帮助。

【问题讨论】：

标签： javascript jquery ajax charts google-visualization

【解决方案1】：

我发现在填充数据后我没有调用该函数，所以我重新排列了我的代码，现在它可以工作了。

我进行了以下更改：我创建了存在于 google.load 回调函数中的 updateChart 函数，并将数据保存在该函数之外，因此保留了它的行。见：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300};
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    function updateChart() {
        $.ajax({
            url: '/api.php',
            type: 'POST',
            data: {
                function: 'entityTrack',
                data: {
                }
            },
            error: function() {
                alert('An error occurred connecting to server. Please check your network');
            },
            dataType: 'json',
            success: function(json) {
                if (json.status) {
                    data.addRows([
                        ['Mushrooms', json.data.entityTrack]
                    ]);
                    console.log(data);
                    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                    chart.draw(data, options);
                }else{
                    alert(json.message);
                }
            }
        });
    setTimeout(updateChart, 5000);
    }
    updateChart();
}

【讨论】：