FusionCharts使用XML和JSON数据源示例

最新推荐文章于 2021-02-26 21:55:55 发布

氺氺

最新推荐文章于 2021-02-26 21:55:55 发布

阅读量1.9w

点赞数 1

本文链接：https://blog.csdn.net/wanghuan203/article/details/10756573

版权

上篇文章简单对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中,这里就不详细介绍.具体使用者有问题可以与我交流.