0

API を使用してデータ (この場合は、Twitter でトレンドのハッシュタグを追跡するサイトからのデータ) を取得し、そのデータを Google チャートに表示する Web ページを生成しようとしています。

さて、私はすでにこの API 呼び出しを使用して、棒グラフと円グラフのデータを正常に取得しましたが、テーブルを適切に機能させることはできません。

HTML コード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Top Tweets from Grand NCE</title>
<meta http-equiv="Content-Type" content="text/xhtml+xml; charset=UTF-8" />

<!-- Code to implement Google charts -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["table"]});
</script>

<!-- jQuery AJAX code & DrawChart code -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="PageThree.js"></script>

</head>

<body>
<div id="chart_div" style="width: 900px; height: 500px; margin:0 auto">Loading...  </div>
</body>
</html>

JavaScript コード:

//calls the API on page load
$(function() {

$.ajax({
    type: "GET",
    cache: false,
    url: "http://academiamap.com/content.php?call=getTrendingTopics&startTime=2013-9-05%2000:00:00&endTime=2013-10-11%2000:00:00&seedUserList=GRAND_NCE",
    success: function(data) {

        data = eval(data); 

        chartData = new Array();
        chartData[0] = ['Hashtag', 'Tweets'];
        for (i=1; i<=data.length; i++) { 
            chartData[i] = new Array();
            chartData[i] = [data[i-1]['tag'], parseInt(data[i-1]['count'])]; 
        }

        console.log(chartData);

        drawChart1(chartData); 
    }
});

});


function drawChart1(dataArray) {
var data = google.visualization.arrayToDataTable(dataArray);

var table = new google.visualization.Table(document.getElementById('table_div'));     //draw chart to "table_div"
table.draw(data, options);
}

私は Web API と JavaScript を使用するのが初めてなので、助けていただければ幸いです。

ありがとうございました！

4

1 に答える 1

0

あなたはほとんどそれを正しく持っています。変更する必要があるのは 2、3 だけです。まず、ページの「準備完了」イベントが発生するまでに Visualization API の読み込みが完了するとは限らないため、ページの読み込み時ではなく、Google ローダーのコールバックから AJAX 呼び出しを実行する必要があります。次に、dataTypeAJAX パラメータを「json」に設定する必要があります。これにより、jQuery は返されたデータを文字列ではなく JSON として解析するようになります。evalこれにより、文字列内で見つかったすべての JavaScript を実行する危険なステートメントが回避されます。他の場所で改善できる点はありますが、それはすべてコードのクリーンアップ (複数行のステートメントを 1 行に凝縮し、冗長なコードを削除する) にすぎません。AJAX を記述する 1 つの方法を次に示します。

$.ajax({
    type: "GET",
    cache: false,
    url: "http://academiamap.com/content.php?call=getTrendingTopics&startTime=2013-9-05%2000:00:00&endTime=2013-10-11%2000:00:00&seedUserList=GRAND_NCE",
    dataType: 'json',
    success: function(json) {
        var dataArray = [['Hashtag', 'Tweets']];
        for (i = 0; i < json.length; i++) {
            dataArray.push([json[i]['tag'], parseInt(json[i]['count'])]); 
        }
        var data = google.visualization.arrayToDataTable(dataArray);

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {});
    }
});

このコード サンプルを使用した jsfiddle を次に示します: http://jsfiddle.net/asgallant/3vbub/

于 2013-10-12T16:10:37.833 に答える