所以我一直在尝试将网站data.asp文件（似乎是用json格式化）写入我的网站，以显示为图表我似乎能够获取json数据但不会显示为谷歌图表API或fusioncharts中的图表我不知道我做错了什么虽然在谷歌和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>© 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" }]
}}
答案 0 :(得分：3)
是的，您需要重新格式化数据。获取数据，将其转换为真正的javascript对象并对其进行迭代，并以API理解的方式重新创建结构。要将JSON转换为Object，您可以使用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 );
}
}
}