Php ajax调用后的Google图表api_Php_Javascript_Ajax_Google Visualization

Php ajax调用后的Google图表api

php javascript ajax google-visualization

Php ajax调用后的Google图表api,php,javascript,ajax,google-visualization,Php,Javascript,Ajax,Google Visualization,在一次ajax调用之后，我遇到了使用google的charts api可视化数据的问题首先，我进行了一个ajax调用并获取了一个json对象。之后，我想从json中提取一些数据，并绘制一个仪表图。获取json并提取数据效果很好，但是当我尝试加载图表时，主体会被删除，我会看到一个空白/白色屏幕。有人知道我做错了什么吗？我还尝试为图表硬编码值，而不是采用json值（但在加载图表之前保留了ajax调用），但这也不起作用 function loadStats(){ var http = get

在一次ajax调用之后，我遇到了使用google的charts api可视化数据的问题

首先，我进行了一个ajax调用并获取了一个json对象。之后，我想从json中提取一些数据，并绘制一个仪表图。获取json并提取数据效果很好，但是当我尝试加载图表时，主体会被删除，我会看到一个空白/白色屏幕。有人知道我做错了什么吗？我还尝试为图表硬编码值，而不是采用json值（但在加载图表之前保留了ajax调用），但这也不起作用

function loadStats(){
    var http = getRequestObject();
    var city = "berlin";
    http.open("GET", "getTwitterSentiments.php?city="+city, true);
    http.onreadystatechange=function() {
        getStatistic(http)
    };
    http.send(null);
}

function getStatistic(request) {
    if ((request.readyState == 4) && (request.status == 200)) {
        var data = request.responseText;
        var JSONStats = eval("(" + data + ")");
        loadGauge(JSONStats.sentiment_index);
    }

function loadGauge(sentiment){
    google.load('visualization', '1', {packages:['gauge']});
    google.setOnLoadCallback(drawGauge);
    function drawGauge() {
        var data = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['Test', sentiment]     
        ]);

        var options = {
            width: 100, 
            height: 100,
            redFrom: 0, 
            redTo: 45,
            yellowFrom: 45,
            yellowTo: 55,
            greenFrom: 55, 
            greenTo: 100,
            minorTicks: 10
        };

        var chart = new google.visualization.Gauge(document.getElementById('testgchart'));
        chart.draw(data, options);
    }
}

我想您的元素

testgchart

还没有加载到DOM中，您的代码应该可以工作

我根据您的代码制作了一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://www.google.com/jsapi"></script>
    <script>
    function loadGauge(val){
        google.load('visualization', '1', {packages:['gauge']});
        google.setOnLoadCallback(drawGauge);
        function drawGauge() {
            var data = google.visualization.arrayToDataTable([
              ['Label', 'Value'],
              ['Test', val],
            ]);

            var options = {
                width: 100, 
                height: 100,
                redFrom: 0, 
                redTo: 45,
                yellowFrom: 45,
                yellowTo: 55,
                greenFrom: 55, 
                greenTo: 100,
                minorTicks: 10
            };


            var chart = new google.visualization.Gauge(document.getElementById('average'));
            chart.draw(data, options);
        }
    }
    </script>
  </head>
  <body>
    <div id="average"></div>
    <script>loadGauge(99)</script>
  </body>
</html>


功能负荷表（val）{
load（'visualization'，'1'，{packages:['gauge']}）；
setOnLoadCallback（drawGauge）；
函数drawGauge（）{
var data=google.visualization.arrayToDataTable([
['Label'，'Value']，
['Test'，val]，
]);
变量选项={
宽度：100，
身高：100，
发自:0,，
雷德托：45，
发黄时间:45,，
yellowTo:55，
格林斯潘：55，
格林托：100，
米诺蒂克斯：10
};
var chart=new google.visualization.Gauge（document.getElementById（'average'）；
图表绘制（数据、选项）；
}
}
负荷计（99）

但是，如果删除此行

loadGauge（99）

，并用

替换车身标签，则此操作无效。你可能也在做类似的事情

如果您确定元素

testgchart

存在，请在

loadGauge

中输入一个日志，告诉我它是否真的被

getStatistic
调用，尝试使用google.load（）
函数的回调功能
例如，对于您的代码，请尝试以下操作：
function loadGauge(sentiment){
    google.load('visualization', '1.0', {'packages':['gauge'], 'callback': drawGauge});

}

function drawGauge(){
...
chart.draw(data, options);
}

有关更多信息，请查看《Google Loader开发者指南》

的“动态加载”部分：

如果我理解正确，多次调用loadGauge（）不会导致多次到Google服务器加载所需的API，而只是一次

既然你没有将任何答案标记为正确，你是如何解决这个问题的？我也深陷其中。