Fusioncharts画图控件封装_使用手册要点.docVIP

Fusioncharts画图控件封装 使用手册 功能描述 本控件的主要用途是编写一套强大、美观、易用的曲线生成工具，用以简化现有项目中相关的曲线开发工作。 该控件基于时下流行的flash画图工具Fusioncharts3.1开发。支持折线图，柱状图，饼图，面积图等常用图形的绘制（暂不支持直方图和平滑曲线）。图形为客户端动态绘制，可以实现动态缩放，动画效果等，生成的图形美观大方。 该控件完全基于javascript开发，实现了平台无关性，同时由于生成的图形为客户端动态绘制，热点数据等不需要单独进行传输管理，因此成图效率很高，解决了jfreechar等工具由于热点数据导致页面执行效率低下的问题。 以下为主要的成图效果的演示 点线图 柱状图 面积图 Stacked面积图 复合模式 饼图 环图 控件部署 需要的文件有 1).charts文件。 在web工程的根目录下建立Chart文件夹（注意大小写），将所有用到的swf文件放到该目录下。 2).js文件 将FusionCharts.js与dateFmt.js引入系统存放javascript的目录内。此外，该模块需要jquery库的支持，将jquery相关的js文件放入javascript目录内。 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:1057,VALUE2:28}... ] } 该json对象要求必须有一个数组用于封装所有的数据，数组中的每一个值为json对象，封装了每条记录的所有数据。 注意：为了便于日期型数据的展示，所有的日期型数据都必须通过getTime方法转化为毫秒数。 后台数据只要能够生成上述模式的数据即可，与平台无关。demo中提供了java语言的默认实现，如果要使用请将json.jar文件引入引入系统类路径。该jar包基于org.json包进行修改得来，其中JSONObject对象可以直接将List（每项为Map）数据转化为满足画图需要的json数据。 开始绘图 1).点线图，柱状图，面积图，stacked（目前只支持面积图的堆叠，柱状图的堆叠稍后加入） 步骤一：引入文件 在页面文件中依次引入jquery.js,dateFmt.js,FusionCharts.js,注意引入顺序 head script type=text/javascript src=js/jquery.js/script script type=text/javascript src=js/dateFmt.js/script script type=text/javascript src=js/FusionCharts.js/script … /head 步骤二：获取数据 获得json数据，以jquery异步获取为例 $(document).ready(function(){ $.post(data.jsp,null,function(data){ var json = JSON.parse(data); var ds=json.data; } } 通过ajax访问data.jsp获得数据，生成的数据格式参见“后台数据生成”部分的描述。 JSON.parse方法可将字符串类型的数据转化为json数据。 还可以通过其他模式获得数据，参见demo中的index.jsp 步骤三：生成图表对象 调用FusionCharts.createXYChart()方法生成图形对象。 该方法只有一个参数，为json格式数据，下面参照例子对该参数进行详细描述。 { chart:{//char对象，封装全图级别的信息 width:90%,//宽度，可按照像素或百分比设置 height:300,//高度，可按照像素或百分比设置 caption:产量趋势,//标题，将显示在图形上方 xAxisName:日期,//横轴描述，将在坐标轴下方（默认隐藏）和鼠标提示中用到 “renderAs”:”line”//指定绘图模式，支持bar，line，area等，默认为line …//其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录 }, ds:ds,//数据，为上一步生成的json格式的数据。该数据作为category和各个seri