FusionCharts XT使用JSON作为数据源创建图表
FusionCharts XT是一款功能强大的跨平台和跨浏览器的Flash以及Html5图表控件,可以使用XML或者JSON作为数据源载体,通过简单的操作即可创建出绚丽的图表,下面我们简单介绍下如何使用Json作为数据源创建图表:
1. 首先我们创建一个weekly-sales.html页面,然后输入下面代码:
<html>
<head>
<title>My First chart using FusionCharts XT - JSON data URL</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts( "FusionCharts/Column3D.swf",
"myChartId", "400", "300", "0" );
myChart.setJSONUrl("Data.json");
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
注意:由于很多IIS服务器默认下没有应用.json文件,您需要打开IIS服务器把该文件类型添加到里面,打开IIS属性管理找到MIME类型,点击新建,在扩展栏输入JSON,MIME类型为"application/json" ,点击确认就可以了。
2. 创建Data.json文件,并设置JSON数据如下:
{
"chart": {
"caption" : "Weekly Sales Summary" ,
"xAxisName" : "Week",
"yAxisName" : "Sales",
"numberPrefix" : "$"
},
"data" :
[
{ "label" : "Week 1", "value" : "14400" },
{ "label" : "Week 2", "value" : "19600" },
{ "label" : "Week 3", "value" : "24000" },
{ "label" : "Week 4", "value" : "15700" }
]
}
通过这样简单的操作,运行程序,图表就显示出来了。