php - 外部 Web サイトのスクレイピングからの JSON をグラフに表示する

Question

そのため、ウェブサイトのdata.aspファイル（jsonでフォーマットされているようです）を自分のウェブサイトにスクレイピングしてチャートとして表示しようとしましたが、jsonデータを取得できるようですが、どちらでもチャートとして表示されませんgoogles chart API または fusioncharts Google と fusioncharts の例では、json データの形式が異なっていますが、何が間違っているのかわかりませんが、それに合わせて変更する必要がありますか? そして、data.aspファイルが外部Webサイトで更新されると、それが私のものでも更新されるようにするにはどうすればよいですか?

編集:データを (更新時と同様に) チャートに取得する簡単な方法はありますか?

        <meta charset="utf-8">
        <title>Olympic Results</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!--styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
          body {
            padding-top: 60px;
            padding-bottom: 40px;
          }
          .sidebar-nav {
            padding: 9px 0;
          }
        </style>
        <link href="css/bootstrap-responsive.css" rel="stylesheet">

        <!--HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <?php
            if(!function_exists("curl_init")) die("cURL extension is not installed");
            $ch = curl_init("http://hosted.stats.com/olympics/medals_widget/data.asp?country=NZL");
            //Configuring curl options 
            $options=array(CURLOPT_RETURNTRANSFER => true, 
                           CURLOPT_HTTPHEADER => array('Content-type: application/json'));
            //Setting curl options
            curl_setopt_array($ch, $options);
            $pageData = curl_exec($ch);
            curl_close($ch); 
            //Cache the channel file 
            $cache_expire = 60*60*24*365;
            header("Pragma: public");
            header("Cache-Control: max-age=".$cache_expire);
            header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
        ?>
        <script type="text/javascript" src="Charts/FusionCharts.js"></script>

      </head>
      <body>
        <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container-fluid">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <a class="brand" href="#">Olympic Results</a>

              <div class="nav-collapse">
                <ul class="nav">
                  <li class="active"><a href="#">Home</a></li>
                </ul>
              </div><!--/.nav-collapse -->

            </div>
          </div>
        </div>

        <div class="container-fluid">
        <div id="chartContainer">FusionCharts XT will load here!</div>          
        <script type="text/javascript">

        <!--       
          var data = <?php echo $pageData; ?>;
          document.write(data);
          var myChart = new FusionCharts( "Charts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
          myChart.setJSONData(data);
          myChart.render("chartContainer");

        // -->     
        </script> 
        <?php echo("$pageData"); ?>
            <footer style="padding-top:100px;">
            <hr>
            <p>&copy; Olympic Results 2012</p>
            </footer>

        </div><!--/.fluid-container-->

        <!-- javascript -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap-transition.js"></script>
        <script src="js/bootstrap-alert.js"></script>
        <script src="js/bootstrap-modal.js"></script>
        <script src="js/bootstrap-dropdown.js"></script>
        <script src="js/bootstrap-scrollspy.js"></script>
        <script src="js/bootstrap-tab.js"></script>
        <script src="js/bootstrap-tooltip.js"></script>
        <script src="js/bootstrap-popover.js"></script>
        <script src="js/bootstrap-button.js"></script>
        <script src="js/bootstrap-collapse.js"></script>
        <script src="js/bootstrap-carousel.js"></script>
        <script src="js/bootstrap-typeahead.js"></script>
      </body>
    </html>

JSONがどのように見えるかを追加するのを忘れました-

{"medals": { 
"Archery":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze":       "0", "total": "0" }], 
"Track & Field":[ { "stats_id": "83", "gold": "0", "silver": "1", "bronze": "0", "total": "1" }], 
"Badminton":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Basketball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Beach Volleyball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Boxing":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Diving":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Equestrian":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "1", "total": "1" }], 
"Soccer":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Fencing":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Handball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Field Hockey":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Judo":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Modern Pentathlon":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }],
"Rowing":[ { "stats_id": "83", "gold": "3", "silver": "0", "bronze": "2", "total": "5" }],  
"Sailing":[ { "stats_id": "83", "gold": "1", "silver": "1", "bronze": "0", "total": "2" }], 
"Shooting":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Swimming":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Synchronized Swimming":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Tennis":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Taekwondo":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Triathlon":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Table Tennis":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Volleyball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Weightlifting":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Water Polo":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Wrestling":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Cycling":[ { "stats_id": "83", "gold": "0", "silver": "1", "bronze": "2", "total": "3" }], 
"Gymnastics":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Canoe":[ { "stats_id": "83", "gold": "1", "silver": "0", "bronze": "0", "total": "1"     }] 
}}

score 3 · Accepted Answer

はい、データを再フォーマットする必要があります。データを取得し、それを実際の JavaScript オブジェクトに変換して反復し、API が理解できる方法で構造を再作成します。JSON をオブジェクトに変換するには、jQuery ライブラリの $.parseJSON メソッドを使用できます。

別物。これらのデータはサーバーによって取得され、アプリケーションにリダイレクトされますか?

編集：ここに一例があります：

// this way, data is already an object
var data = { "medals": {
    "Archery":[{
        "stats_id": "83",
        "gold": "0",
        "silver": "0",
        "bronze":  "0",
        "total": "0"
    }],
    "Track & Field":[{
        "stats_id": "83",
        "gold": "0",
        "silver": "1",
        "bronze": "0",
        "total": "1"
    }] // more data here...
}};

// if data comes this way (a String), it needs to be parsed
var dataStr = "{ \"medals\": {" +
"    \"Archery\":[{" +
"        \"stats_id\": \"83\"," +
"        \"gold\": \"0\"," +
"        \"silver\": \"0\"," +
"        \"bronze\":  \"0\"," +
"        \"total\": \"0\"" +
"    }]," +
"    \"Track & Field\":[{" +
"        \"stats_id\": \"83\"," +
"        \"gold\": \"0\"," +
"        \"silver\": \"1\"," +
"        \"bronze\": \"0\"," +
"        \"total\": \"1\"" +
"    }]" + // more data here...
"}}";

console.log( data );

var obj = $.parseJSON( dataStr );
console.log( obj );

traverseObj(obj);

// traverses the object to see all its properties
function traverseObj( data ) {
    for ( var key in data ) {

        var value = data[key];

        if ( $.isPlainObject( value ) ) {

            console.log( "**key: " + key );
            traverseObj( value );

        } else if ( $.isArray( value ) ) {

            console.log( "key: " + key );
            var values = "";

            for ( var i = 0; i < value.length; i++ ) {
                var currValue = value[i];
                if ( $.isPlainObject( currValue ) ) {
                    traverseObj(currValue);
                } else {
                    values += currValue + ", ";
                }
                if ( values != "" ) {
                    console.log( " - value: " + value );
                }
            }

        } else {
            console.log( "key: " + key + " - value: " + value );
        }
    }
}

これがフィドルです：http://jsfiddle.net/davidbuzatto/MysPe/

php - 外部 Web サイトのスクレイピングからの JSON をグラフに表示する

1 に答える 1

Related

Reference