javascript - 使用 jQuery 在计时器上使用 ajax 更新 google 图表

Question

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

这是迄今为止我的代码:

<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 控制台错误。非常感谢任何帮助。

Answer 1

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

我做了以下更改:我创建了 updateChart 函数，该函数存在于 google.load 的回调函数内，并且我将数据保留在该函数之外，因此保留了其行。请参阅:

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