Question

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

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

<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>

我的图表使用文字＆＃34;无数据＆＃34;呈现。在我的控制台日志中，我每5秒钟收到一次console.log（数据）输出，该输出显示我的API传递的当前值。此外，它不会附加数据，它会覆盖它。

当我把我的declare语句用于函数之外的数据时，我遇到的DataTable没有定义控制台错误。非常感谢任何帮助。

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

使用jQuery

1 个答案: