2

在 ajax 调用之后，我遇到了使用谷歌图表 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);
    }
}
4

2 回答 2

2

尝试使用函数的回调google.load()功能。

例如，对于您的代码，请尝试以下操作：

function loadGauge(sentiment){
    google.load('visualization', '1.0', {'packages':['gauge'], 'callback': drawGauge});

}

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

Google Loader Developer Guide有关更多信息，请查看 https://developers.google.com/loader/#Dynamic的“动态加载”部分

如果我理解正确，多次调用 loadGauge()不会导致多次访问 Google 服务器来加载所需的 API，而只会导致一次。

于 2012-10-17T19:39:24.323 回答
0

我猜你的元素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>

但是，如果您删除此行<script>loadGauge(99)</script>并将正文标记替换为<body onload="loadGauge(99)">. 你可能在做类似的事情。

如果您确定该元素testgchart存在，请登录loadGauge并告诉我它是否真的被getStatistic.

于 2012-06-23T10:03:45.963 回答