FusionCharts简明指南.docxVIP

一、制作第一个FusionCharts 首先跟着官方文档制作第一个图表。具体实现比较简单，不高兴看英文可以看文档下方房产项目的代码，字符串组装数据的，仅供参考。 官方文档：/charts/contents/FirstChart/FirstChart.html /charts/ FusionCharts使用比较简单，只需3步： 前台加载JS 后台用字符串的方式组装数据 前台JS加载后台组装的数据给予展现 1. 前台加载JS script language=JavaScriptsrc=%=request.getContextPath()%/charts/Charts/FusionCharts.js type=text/javascript /script 2. 后台用字符串的方式组装数据 在controller文件里定义一个字符串，将xml文件组合成字符串 String str = ?xml version=\\\1.0\\\ encoding=GBK?; str+= chart caption=标题; str+= showAboutMenuItem=0 showZeroPies =1 ; str+= showLegend=1 legendPosition=right; str+= showPercentInToolTip =0 showToolTipShadow=1; str+= formatNumber=1 formatNumberScale =0 bgAlpha=0 ; str+= baseFontSize=12 baseFont=宋体 ; str+= chartLeftMargin=90 chartTopMargin=25pieRadius=55 ; str+= set label=自用数量 value=1 / ; str+= set label=出租数量 value=2 / ; str+= set label=空置数量 value=3 / ; str+= /chart; chart中的属性不做解释，下文中将会讲到如何快捷的查看。 另外，组装数据还可以直接使用xml。 3.前台JS加载后台组装的数据给予展现 script type=text/javascript var myChart ;　 $(document).ready(function(){　 myChart = new FusionCharts(%=basePath%charts/Charts/Pie2D.swf, chartDY01, 396, 227, 0, 1);　//设置图的样式、id，长、高等。1和showExportDataMenuItem=1一起用页面能导出数据　 myChart.setTransparent(true);　// flash透明，不需要的可以缺省。 $.ajax({//后台取数据 type: Get, url: data: null, success: function (data) { myChart.setXMLData(data.str);//字符串形式组装的xml myChart.render(chartdistribution);//图表位置htmlid，比如：divID　 } });　 ?/script 二、快速开发 进入本地文档中的gallery页面，先选要开发的图表。 FusionCharts_Evaluation\Gallery\index.html 比如要做首页的柱状图： 点击就能看到该图形的xml文档。上面会有图形主要属性，和数据格式。 如果你是用字符串的方式组装数据的话，把xml组装成字符串（见上文2. 后台用组装数据）。 前台加载JS 和后台组装的数据，简单的demo就完成了。剩下的就是对chart属性的修改。 三、常用属性 chart的属性很多，需要查阅官方文档。官方文档:/charts/ 看文档的话主要看这三类： 上面2个单Y轴图形，下面是双Y轴图形。具体要自己看属性。 这里就介绍下常用的一些属性，网上摘录的，做了些修改。 fusionCharts 主要属性： 按照模块分类： 1、边框及整个背景的属性： 属性名称 属性说明 实例 bgColor 背景颜色 bgColor=999999,FFFFF 渐变 bgColor=’999999’ 单色 bgAlpha 背景透明度 设置范围在 1-100 showBorder 图表外是否显示边框 默认二维图表显示，三维不显示 borderColo