2

ajax呼び出し後、Googleのチャート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);
}

詳細については、httpsGoogle Loader Developer Guide : //developers.google.com/loader/#Dynamic の「動的読み込み」セクションを確認してください。

私の理解が正しければ、 loadGauge() を複数回呼び出しても、必要な API をロードするために Google サーバーに複数回アクセスすることはなく、1 回だけです。

于 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 タグを に置き換えると機能しません<body onload="loadGauge(99)">。あなたはおそらく似たようなことをしています。

要素testgchartが存在することが確実な場合は、ログインしloadGaugeて、本当に によって呼び出されるかどうかを教えてくださいgetStatistic。

于 2012-06-23T10:03:45.963 に答える