FusionCharts使用XML和JSON数据源示例
上篇文章简单对FushionCharts进行了介绍，这篇文章通过具体例子来介绍FushionCharts使用XML和JSON数据源的方式。
使用FushionCharts的步骤很简单，只需要将使用的swf文件和fushionCharts.js拷贝到项目中即可,不需要任何jar包.每个swf文件对应一种图样,例如2D柱形图和3D柱形图分别对应了两个swf文件.
FushionCharts的使用原理很简单,每种图例都已经做好了原型,我们要做的就是传入原型对应的数据,然后调用FushionCharts.js的方法进行创建即可.
看具体的jsp:
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030" %>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title></title>
<link href="js/style.css" rel="stylesheet" type="text/css" />
<link href="js/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/fusionCharts/FusionCharts.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
</head>
<body>
<table width="100%">
<tr>
<td><div id="2DCoulmn" align="center">2D柱形图</div></td>
<td><div id="MSLine" align="center">多维线形图</div></td>
</tr>
<tr>
<td><div id="AngularGauge" align="center">仪表盘</div></td>
</tr>
</table>
<script type="text/javascript">
//使用XMLUrl方式,需要将写好的数据XML文件放到指定位置
var MS2dColumn = new FusionCharts("flex/fusioncharts/MSColumn2D.swf", "MS2DColumnID", "460", "350", "0", "1");
MS2dColumn.setXMLUrl("../flex/data/XML/Col2D1.xml");
//绑定到指定控件
MS2dColumn.render("2DCoulmn");
//使用json数据
var MSLine = new FusionCharts("flex/fusioncharts/MSLine.swf", "MSLineID", "460", "350", "0", "1"); MSLine.setJSONData({
"chart":{
"caption":"Business Results 2005 v 2006",
"xaxisname":"Month",
"yaxisname":"Revenue",
"showvalues":"0",
"numberprefix":"$" },
"categories":[{
"category":[
{ "label":"Jan" },
{ "label":"Feb" },
{ "label":"Mar" },
{ "label":"Apr" },
{ "label":"May" },
{ "label":"Jun" },
{ "label":"Jul" },
{ "label":"Aug" },
{ "label":"Sep" },
{ "label":"Oct" },
{ "label":"Nov" },
{ "label":"Dec" }]
}
],
"dataset":[
{
"seriesname":"2006",
"data":[
{ "value":"27400" },
{ "value":"29800" },
{ "value":"25800" },
{ "value":"26800" },
{ "value":"29600" },
{ "value":"32600" },
{ "value":"31800" },
{ "value":"36700" },
{ "value":"29700" },
{ "value":"31900" },
{ "value":"34800" },
{ "value":"24800" } ] },
{ "seriesname":"2007",
"data":[
{ "value":"27900" },
{ "value":"29800" },
{ "value":"15800" },
{ "value":"24800" },
{ "value":"19600" },
{ "value":"32600" },
{ "value":"35800" },
{ "value":"31700" },
{ "value":"39700" },
{ "value":"51900" },
{ "value":"14800" },
{ "value":"20800" } ] },
{ "seriesname":"2005",
"data":[{ "value":"10000" },
{ "value":"11500" },
{ "value":"12500" },
{ "value":"15000" },
{ "value":"11000" },
{ "value":"9800" },
{ "value":"11800" },
{ "value":"19700" },
{ "value":"21700" },
{ "value":"21900" },
{ "value":"22900" },
{ "value":"20800" } ] } ],
"trendlines":{
"line":[{ "startvalue":"26000",
"color":"91C728",
"displayvalue":"Target",
"showontop":"1"
}]
},
"styles":[{
"definition":[{
"style":[{ "name":"CanvasAnim",
"type":"animation",
"param":"_xScale",
"start":"0",
"duration":"1"
}]
}],
"application":[{
"apply":[{ "toobject":"Canvas",
"styles":"CanvasAnim"
}]
}]
}]
});
//使用xml数据
var AngularGauge = new FusionCharts("<%=request.getContextPath()%>/flex/fusioncharts/AngularGauge.swf", "仪表盘", "300", "300", "0", "1");
var xmlDate= "<chart bgAlpha='0' bgColor='000000' lowerLimit='0' upperLimit='100' numberSuffix='%25' showBorder='0' basefontColor='000000' chartTopMargin='25' chartBottomMargin='25' chartLeftMargin='25' chartRightMargin='25' toolTipBgColor='80A905' gaugeFillMix='{dark-10},FFFFFF,{dark-10}' gaugeFillRatio='3'> <colorRange> <color minValue='0' maxValue='45' code='8BBA00'/> <color minValue='45' maxValue='80' code='F6BD0F'/> <color minValue='80' maxValue='100' code='FF654F'/></colorRange><dials><dial value='50' rearExtension='10'/></dials><trendpoints><point value='50' displayValue='Average' fontcolor='FF4400' useMarker='1' dashed='1' dashLen='2' dashGap='2' valueInside='1' /></trendpoints><annotations><annotationGroup id='Grp1' showBelow='1' ><annotation type='rectangle' x='0' y='0' toX='445' toY='225' radius='0' color='E6F7F7' showBorder='0' /></annotationGroup></annotations><styles> <definition> <style name='RectShadow' type='shadow' strength='3'/> </definition><application><apply toObject='Grp1' styles='RectShadow' /> </application> </styles> </chart> ";
AngularGauge.setXMLData(xmlDate);
AngularGauge.render("AngularGauge");
</script>
</body>
</html>
FusionCharts支持直接使用文件数据,也支持直接将数据写到文件里,可根据自己数据的情况来选择合适的方式.
比较常用的还是JSON方式,因为后台从数据库取出的数据LIST,可以直接转为JSON格式传到前台界面,然后使用setJSONData推送到Chart中,这里就不详细介绍.具体使用者有问题可以与我交流.