php - 在图表上显示来自外部网站抓取的 JSON

标签 php javascript json charts scrape

所以我一直在尝试将网站 data.asp 文件(似乎以 json 格式)抓取到我的网站中以显示为图表我似乎能够获取 json 数据但不会显示为googles chart API 或 fusioncharts 中的图表我不确定我做错了什么，尽管在 google 和 fusioncharts 的示例中，json 数据的格式不同，我是否必须更改我的数据以满足该要求？我将如何做到这一点，以确保当 data.asp 文件在外部网站上更新时，它也在我的网站上更新？

编辑:是否有更简单的方法将数据(以及更新时的数据)放入图表中？ 

        <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"     }] 
}}

最佳答案

是的，您需要重新格式化您的数据。获取数据，将其转换为真正的 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 );
        }
    }
}

这是 fiddle :http://jsfiddle.net/davidbuzatto/MysPe/

关于php - 在图表上显示来自外部网站抓取的 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11922624/

上一篇：javascript - 当字符串包含 HTML 标记时 JSON 无法解析

下一篇：javascript - 如何使用 javascript 将值插入到与另一个字符串匹配的位置的字符串中？

相关文章：

javascript - 基于 2 次按钮单击显示和隐藏选择框

javascript - "$.getJSON("myurl",response);"的等效回调函数？

php - 如何在Grails项目中使用PHP中生成的盐

javascript - 第二次追加时停止图像加载

javascript - Highcharts 中最后一列宽度的问题

javascript - html刷新页面除了ajax外不再发送表单数据

来自用作 PHP 数组键值的 HTTP GET 数据的 PHP 注入(inject)

javascript - 如果选中复选框则执行 if 函数 angular.js

jquery - 使用 jQuery 打印 JSON 对象

java - 使用 curl 发布 POST 时获取 HTTP 404 Not Found

©2024 IT工具网  联系我们