FusionCharts使用XML和JSON数据源示例
发布时间：2020-12-16 05:59:52 所属栏目：百科 来源：网络整理
导读：上篇文章简单对FushionCharts进行了介绍，这篇文章通过具体例子来介绍FushionCharts使用XML和JSON数据源的方式。 使用FushionCharts的步骤很简单，只需要将使用的swf文件和fushionCharts.js拷贝到项目中即可,不需要任何jar包.每个swf文件对应一种图样,例如2D
|
上篇文章简单对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","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":"15800" },{ "value":"24800" },{ "value":"19600" },{ "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","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中,这里就不详细介绍.具体使用者有问题可以与我交流. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
相关内容