FushionCharts使用文档.docxVIP

Fusioncharts使用文档FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，目前已经封装实现的图形有：线路图，柱状图，饼状图，半圆盘，蜡烛图。实现方法大致概括为：导入相关文件确定你需要实现的图形在页面写JS方法进去后台处理业务根据你需要实现的图形，在后台组装特定格式的数据返回到页面进行渲染。不同图形有相应的封装方法，实现例子已在下文中给出，以下是实现效果、相关的属性与方法：1)无图例的线路图形2）有图例的线路图形3)无图例的2D柱状图4)无图例的3D柱状图5)有图例的2D柱状图6)有图例的3D柱状图7)饼状图8)温度计9)半圆盘10)蜡烛图1、已实践例子(有图例的曲线图)：1) 首先把相关文件拷贝进项目中(js包下的fuctioncharts文件夹为图表模型与JS文件，JAVA包下的fuctioncharts文件夹为相关模块,拷贝请注意路径，JAVA包下的文件夹建议放在平台biz包下) 2) 在页面中引入两个js文件(路径根据项目而定)：scripttype=text/javascriptsrc=${pageContext.request.contextPath}/resources/scripts/fusioncharts/FusionCharts.js/scriptscripttype=text/javascriptsrc=${pageContext.request.contextPath}/resources/scripts/fusioncharts/fusioncharts_1.0.js/script3) 在方法中调用ajax获取数据后传回页面，只需要调用封装好的方法即可进行图标展示:functionyouSePuKLine(start,end){vardeviceid=${deviceid};$.ajax({type:POST,url:c:url value=/ajax/,data:{service: .monitorPage.service.MonitorPageService, method: getYouSePuKLineView, params:[deviceid,start,end]},success:function(data){ //有图例的曲线图，具体方法可以参考fusioncharts_1.0.jsFusionChartForMSLine(div的ID,data.JSONDATA,100%,100%);},error:function(){},dataType:json});}4) service方法后台的数据组装返回的格式可以是json格式的也可以是xml格式的，现在封装使用json格式例子如下：publicDataRecordgetYouSePuKLineView(String deviceid,Stringstart,String end) {DataRecorddr=newDataRecord();MapString,Object map=newHashMapString,Object();map.put(deviceid, deviceid);map.put(start, start);map.put(end, end);ListDataRecord dataList=this.getDao().queryForDataSet(.monitorpage.getYouSePuKLine, map).getResults();FusionChartUtil c=newFusionChartUtil();Chart chart=newChart();chart.setLegendPosition(RIGHT);String jsonStr=c.fusionChart(chart,dataList, null);//有图例dr.put(JSONDATA,jsonStr);returndr;}5) SQL查询特定格式的dataList：（特定格式为：object_type作为图例X轴显示标签,其他为Y轴显示线条）selectid=getYouSePuKLineparameterType=mapresultType=datarecordselect XXX as object_type ,XXX 一般，XXX 重大，XXX 紧急 from 表名/select2、关键类Chart.java可设置图形的相关属性/**Y轴名称**/private String yaxisname=;private String xaxisname=;/**标题**/private String caption=;private String numberprefix=;//数字前缀pri