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

我有一个图表，我想使用来自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>

load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var options={'title'：'我昨晚吃了多少比萨饼'，'width'：400，'height'：300}；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Topping'）；
data.addColumn（'number'，'Slices'）；
$.ajax({
url:“/api.php”，
键入：“POST”，
数据：{
函数：“entityTrack”，
数据：{
}
},
错误：函数（）{
警报（'连接到服务器时出错。请检查您的网络'）；
},
数据类型：“json”，
成功：函数（json）{
if（json.status）{
data.addRows([
['musts'，json.data.entityTrack]
]);
}否则{
警报（json.message）；
}
}
});
控制台日志（数据）；
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
图表绘制（数据、选项）；
设置超时（绘图图，5000）；
}

我的图表以文本“无数据”呈现。在我的控制台日志中，每5秒钟我就会收到console.log（数据）输出，它显示了我的API传递的当前值。此外，它不会附加数据，而是覆盖数据

---

当我将数据的declare语句放在函数外部时，我遇到了DataTable未定义的控制台错误。非常感谢您的帮助。

我发现在填充数据后我没有调用函数，所以我重新整理了代码，现在它可以工作了

我做了以下更改：我创建了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();
}