Fusioncharts画图控件封装_使用手册.doc

《Fusioncharts画图控件封装_使用手册.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Fusioncharts画图控件封装使用手册1功能描述本控件的主要用途是编写一套强大、美观、易用的曲线生成工具，用以简化现有项目中相关的曲线开发工作。该控件基于时下流行的flash画图工具Fusioncharts3.1开发。支持折线图，柱状图，饼图，面积图等常用图形的绘制（暂不支持直方图和平滑曲线）。图形为客户端动态绘制，可以实现动态缩放，动画效果等，生成的图形美观大方。该控件完全基于javascript开发，实现了平台无关性，同时由于生成的图形为客户端动态绘制，热点数据等不需要单独进行传输管理，因此成

2、图效率很高，解决了jfreechar等工具由于热点数据导致页面执行效率低下的问题。以下为主要的成图效果的演示点线图柱状图面积图Stacked面积图复合模式饼图环图1控件部署需要的文件有1).charts文件。在web工程的根目录下建立Chart文件夹（注意大小写），将所有用到的swf文件放到该目录下。2).js文件将FusionCharts.js与dateFmt.js引入系统存放javascript的目录内。此外，该模块需要jquery库的支持，将jquery相关的js文件放入javascript目录内

3、。3).后台数据生成该控件目前只能解析json格式的数据。要求的数据格式如下：{"data":[{"RQ":1272643200000,"VALUE":1000,"VALUE2":0},{"RQ":1272729600000,"VALUE":999,"VALUE2":2},{"RQ":1272816000000,"VALUE":1036,"VALUE2":5},{"RQ":1272902400000,"VALUE":1029,"VALUE2":7},{"RQ":1273248000000,"VALUE"

4、:1057,"VALUE2":28}...]}该json对象要求必须有一个数组用于封装所有的数据，数组中的每一个值为json对象，封装了每条记录的所有数据。注意：为了便于日期型数据的展示，所有的日期型数据都必须通过getTime方法转化为毫秒数。后台数据只要能够生成上述模式的数据即可，与平台无关。demo中提供了java语言的默认实现，如果要使用请将json.jar文件引入引入系统类路径。该jar包基于org.json包进行修改得来，其中JSONObject对象可以直接将List（每项为Map）数据转化

5、为满足画图需要的json数据。1开始绘图1).点线图，柱状图，面积图，stacked（目前只支持面积图的堆叠，柱状图的堆叠稍后加入）步骤一：引入文件在页面文件中依次引入jquery.js,dateFmt.js,FusionCharts.js,注意引入顺序

6、ttype="text/javascript"src="js/FusionCharts.js">…步骤二：获取数据获得json数据，以jquery异步获取为例$(document).ready(function(){$.post("data.jsp",null,function(data){varjson=JSON.parse(data);vards=json.data;}}通过ajax访问data.jsp获得数据，生成的数据格式参见“后台数据生成”部分的描述。JSON.

7、parse方法可将字符串类型的数据转化为json数据。还可以通过其他模式获得数据，参见demo中的index.jsp步骤三：生成图表对象调用FusionCharts.createXYChart()方法生成图形对象。该方法只有一个参数，为json格式数据，下面参照例子对该参数进行详细描述。{"chart":{//char对象，封装全图级别的信息"width":"90%",//宽度，可按照像素或百分比设置"height":"300",//高度，可按照像素或百分比设置"caption":"产量趋势",//标题

8、，将显示在图形上方"xAxisName":"日期",//横轴描述，将在坐标轴下方（默认隐藏）和鼠标提示中用到“renderAs”:”line”//指定绘图模式，支持bar，line，area等，默认为line…//其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录},"ds":ds,//数据，为上一步生成的json格式的数据。该数据作为category和各个serieses的默认数据源，如果数据源单独指定了，该值将被覆盖。"ca