FushionCharts使用文档.docx

Fusioncharts使用文档FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，目前已经封装实现的图形有：线路图，柱状图，饼状图，半圆盘，蜡烛图。实现方法大致概括为：1） 导入相关文件2） 确定你需要实现的图形3） 在页面写JS方法进去后台处理业务4） 根据你需要实现的图形，在后台组装特定格式的数据返回到页面进行渲染。不同图形有相应的封装方法，实现例子已在下文中给出，以下是实现效果、相关的属性与方法：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文件(路径根据项目而定)：3) 在方法中调用ajax获取数据后传回页面，只需要调用封装好的方法即可进行图标展示:function youSePuKLine(start,end)var deviceid=$deviceid;$.ajax(type:POST,url:,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格式例子如下：public DataRecord getYouSePuKLineView(String deviceid,String start,String end) DataRecord dr=new DataRecord();Map map=new HashMap();map.put(deviceid, deviceid);map.put(start, start);map.put(end, end);List dataList=this.getDao().queryForDataSet(.monitorpage.getYouSePuKLine, map).getResults();FusionChartUtil c=new FusionChartUtil();Chart chart=new Chart();chart.setLegendPosition(RIGHT); String jsonStr= c.fusionChart(chart,dataList, null);/有图例dr.put(JSONDATA, jsonStr);return dr;5) SQL查询特定格式的dataList：（特定格式为：object_type作为图例X轴显示标签,其他为Y轴显示线条） select XXX as object_type ,XXX 一般，XXX 重大，XXX 紧急 from 表名2、关键类Chart.java可设置图形的相关属性/*Y轴名称*/private String yaxisname=;private String xaxisname=;/*标题*/private String caption=;private String numberprefix=;/数字前缀private String numberSuffix=;/数字后缀/*设置透明度的几个参数*/private String canvasBgAlpha=0;private String bgAlpha=0;private String borderThickness=0;private String borderAlpha=0;private String formatNumberScale=0;/网格透明度private String alternateHGridAlpha=0;private String alternateVGridAlpha;/设置字体private String baseFont;private String baseFontColor;private String baseFontSize=12;private String outCnvBaseFontSize=12;/1-72画板外字体的大小private String outCnvBaseFontColor;private String outCnvBaseFont;private String labelStep=0;private String showCanvasBase=true;/字体是否倾斜显示private String labelDisplay=; /X轴标签对齐方式为旋转,ROTATE旋转，空不旋转。/* * WRAP/STAGGER/ROTATE/NONE * 仅当labelDisplay=ROTATE时该属性才有效，这个属性设置标签显示为倾斜或完全垂直。(1表示倾斜、0表示垂直) */private String slantLabels=1 ;/背景颜色private String bgColor=000000;/2D中是否有3D效果private String useroundedges= 1;private String showValues=0;/0/1(是否在图形上显示每根柱子具体的值)private String showlegend=1;/饼图的图例是否显示/图表边距设置private String chartLeftMargin;private String chartRightMargin;private String chartBottomMargin;private String chartTopMargin;/图例private String legendPosition=;/图例位置 RIGHT BOTTOMprivate String legendIconScale=1;/图例大小private String legendAllowDrag=0;/是否允许拖动图例private String legendBorderThickness=;/ 图例边框粗细private String legendBorderAlpha=;/图例边框透明度0-100private String legendShadow=0;/图例是否有阴影0/1private String legendNumColumns; /图例列数private String legendBgAlpha;/图例背景透明private String legendBgColor;/图例背景色/饼图private String showLabels=;/是否显示Label/是否统一颜色private String paletteColors=;/改变图形的颜色private String valuePosition=AUTO;/值的位置(ABOVE/BELOW/AUTO,上下自动)/设置Y轴的最大值 最小值private String yAxisMinValue;private String yAxisMaxValue;private String clickURL;/n-给整个图片添加一个地址，n-表示新弹出一个页面private String unescapeLinks=0;/处理中文乱码3、不同图形前后台的实现方法(详细实现请查看文件fusioncharts_1.0.js与FusionChartUtil.java)：1）无图例的线路图形前台：function FusionChartForLine(divId,data,width,hight)后台：调用方法：(标注在文档最下方)SQL查询规范格式：注意：后台数据默认组装为JSON格式的字符串。SQL查询后得到的数据被FusionChartUtil.java里调用的方法转换为规范的JSON格式数据，JSON格式数据传回到前台。2）有图例的线路图形前台：function FusionChartForMSLine(divId,data,width,hight)后台：调用方法：SQL查询规范格式：3）无图例的2D柱状图前台：function FusionChartForColumn2D(divId,datawidth,hight,isVH)后台：调用方法：SQL查询规范格式：4)无图例的3D柱状图前台：function FusionChartForColumn3D(divId,data,width,hight,isVH)后台：SQL查询规范：5）有图例的2D柱状图前台：function ChartForMSColumn2D(divId,data,width,hight,isVH)后台：SQL查询规范：6) 有图例的3D柱状图前台：function ChartForMSColumn3D(divId,data,width,hight,isVH)后台：SQL查询规范：7）饼状图前台：function ChartForPie(divId,data,width,hight,is3D)后台：使用无图例的方法SQL查询规范：8)温度计前台：后台：SQL查询规范：9）半圆盘前台：function FusionChartForAngularGauge(divId,data,width,hight)后台：SQL查询规范：10）蜡烛图前台：function FusionChartForScatter(divId,data,width,hight)后台：SQL查询规范：4、标注： 普通图形，无图例与有图例的调用方法在于参数个数的不同，chart参数用来设置图表的各种样式，去除chart参数为默认样式 (具体实现查看类FusionChartUtil.java)：fusionChart(Chart chart,List data)，无图例fusionChart(Chart chart,List dataList,List proList)，有图例，proList默认为null,留着扩展使用。 select XXX as FLABEL, XXX as FVALUE from 表名 slect XXX as object_type,XXX 别名，XXX 别名 from 表名 半圆盘的数据封装方法：AGfusionChart(Chart chart,List dataList,String maxValue) 蜡烛图的数据封装方法：String XYfusionChart(Chart chart,List dataList) 蜡烛图的数据查询方式：SELECT $xcode x,$ycode y FROM $tablename 温度计数据使用XML格式封装例子：StringBuffer sb = new StringBuffer();sb.append();sb.append( + 56.1 + );sb.append();String str = sb.toString();PrintWriter out = null;try response.setContentType(text/json;charset=utf-8);out = response.getWriter();out.println(str);out.flush(); catch (Exception e) e.printStackTrace(); finally out.close(); 半圆盘前台处理方式,未封装的写法例子：function jieDiDianLiu()var deviceid=$deviceid;$.ajax(type:POST,url:,data:service: .monitorPage.service.MonitorPageService, method: getTieXin, params:deviceid,success:function(data) /第一个参数swf地址，第二个chart的id，这个id与div的id不能相同，第三个长度，第四个宽度 var myChart = new FusionCharts($pageContext.request.contextPath/scripts/fusioncharts/AngularGauge.swf, ChartId2, 100%, 100%); $(#tiexinzhi).html(铁芯接地电流 +