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

Fusioncharts画图控件封装使用手册1 功能描述本控件的主要用途是编写一套强大、美观、易用的曲线生成工具，用以简化现有项目中相关的曲线开发工作。该控件基于时下流行的flash画图工具Fusioncharts3.1开发。支持折线图，柱状图，饼图，面积图等常用图形的绘制（暂不支持直方图和平滑曲线）。图形为客户端动态绘制，可以实现动态缩放，动画效果等，生成的图形美观大方。该控件完全基于javascript开发，实现了平台无关性，同时由于生成的图形为客户端动态绘制，热点数据等不需要单独进行传输管理，因此成图效率很高，解决了jfreechar等工具由于热点数据导致页面执行效率低下的问题。以下为主要的成图效果的演示点线图柱状图面积图Stacked面积图复合模式饼图环图2 控件部署需要的文件有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数据。3 开始绘图1).点线图，柱状图，面积图，stacked（目前只支持面积图的堆叠，柱状图的堆叠稍后加入）步骤一：引入文件在页面文件中依次引入jquery.js,dateFmt.js,FusionCharts.js,注意引入顺序步骤二：获取数据获得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和各个serieses的默认数据源，如果数据源单独指定了，该值将被覆盖。category:/横坐标设置，用于指定从ds中选取哪一列。ds可以单独指定column:RQ,/”ds”:ds,/ds可单独指定fmt:MM月dd日/如果指定该值，程序将把本列作为日期类型处理/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录,axes:/坐标轴定义，为数组，数组大小为1或2，分别用于设置图形两侧的坐标轴。/第一个对象用于设置靠左边的轴axisName:产液,/坐标轴的标题serieses:/serieses对象用于指定该轴上要画的线，为一个数组，每一项用于描述一条曲线。/第一条线column用于指定从ds中选取哪一列作为数据，ds可单独指定seriesName:老井液量,/”ds”:ds,/ds单独指定column:VALUE,“color”:”FF0000”,/指定颜色“renderAs”:”bar”/指定绘图模式，支持bar，line，area等/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录,/第二条线seriesName:新井液量,column:VALUE2/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录,/第二个对象用于设置靠右边的轴axisName:井数,serieses:seriesName:总井数,column:VALUE3/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录步骤四：渲染图形调用chart.render函数将图形绘制到页面中。这里的chart为第三步中生成的chart对象。Render函数有两个参数，第一个参数用来指定图形绘制的位置。支持字符串和dom对象两种类型的参数。如果是字符串，将按照该字符串作为ID查找dom对象，否则直接用该dom对象，在该dom对象内绘制图形。第二个参数为一布尔型参数，当该参数为true时，在图形的上方会生成控制曲线显示的复选框。具体代码参见demo中的index.jsp2).饼图饼图的绘制比点线图简单，具体步骤为。步骤一：引入文件，这一步与点线图绘制时相同，参照上面的介绍。步骤二：获取数据，参照点线图的介绍。步骤三：生成图表对象调用FusionCharts.createPieChart()方法生成图形对象。该方法只有一个参数，为json格式数据，下面参照例子对该参数进行详细描述：与点线图相比，该参数要简单许多/饼图ds:ds,/步骤二中获得的数据col:VALUE,/作为数据的列labelCol:KEY/作为分类的列/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录步骤四：渲染图形，参照点线图的介绍。具体代码参见demo中的index.jsp4 注意事项1. 对象属性不区分大小写，但为了便于阅读和避免可能存在的兼容性问题，最好按照附录中的大小写拼写规则进行使用。2. 目前不支持时序图，要想绘制时序图，要求每条数据必须严格按照日期先后排序。3. category和每个series都支持单独设置ds。但是要求每个ds数组的大小必须一致，并且每一行数据都按照业务逻辑对应。5 已知问题列表1. 不支持直方图和平滑曲线图的绘制。这是受限于fusioncharts本身的功能，暂不能解决。2. 不支持原jfreechart的组合图形模式。即多个子图共享同一横轴的模式。只能通过绘制多个图形的方式来代替。3. 不支持用户自定义事件。这也是受到fusioncharts的限制。4. 暂时没有封装图形动态修改功能。比如客户端设置曲线的颜色，显示与隐藏等。5. 暂时没有提供修改默认样式的接口。6. 缺少图片另存为功能。已解决。6 下阶段开发方向1. 改进API，进一步简化常用图形的绘制。2. 添加图形动态修改功能。即可以在客户端对已经绘制完成的图形进行动态配置。3. 开发java版本的图片另存为功能。4. 由于fusioncharts本身的一些限制，很多功能无法实现。接下来将研究另一个开源项目OpenFlashChart看能否解决这些问题。封装API尽量保持与现有模块的兼容。5. 添加对dwr的支持，增强其对jquery的支持，考虑做成jquery插件的形式。附录参数列表XYChart：包括点线图，柱状图，面积图等参数所属对象参数名默认值可选值参数描述是否必须chartwidth无像素数或百分比图形宽度是height无像素数或百分比图形高度是setAdaptiveYMin10/1Y轴最小值自适应否setAdaptiveSYMin10/1Y轴副轴最小值自适应否labelNum5整数横轴label数目，该值会被labelStep覆盖否labelStep由labelNum和记录条数计算所得整数横轴label的间隔否legendPositionRIGHTRIGHTBOTTOM图例的显示位置否renderAslineline/bar/area绘图模式， 线，柱，面积图。该值的设置影响到图的条线的绘制否stacked00/1是否堆叠否showXlabel00/1是否显示横轴label否showYlabel10/1是否显示纵轴label否showValues10/1是否在图形上显示值否bgColorFFFFFF,000000去掉#的颜色值背景色，可以设置色彩过渡，通过逗号间隔否divLineColor8CB1FF去掉#的颜色值水平线颜色否anchorAlpha00-100锚点的透明度，设置为0为不显示锚点，但保留热区还有很多其他的属性，与fusioncharts官方版本一致，该封装保留了对原版本的兼容。具体参数的描述请参照官方帮助文档。dsds无Json格式的数据数据源，如果category和serieses不单独设置ds的话，都会使用该ds否categorycolumn无字符串ds中用于作为横轴的列名是ds无Json格式的数据json格式的数据源该值会覆盖图表的ds否fmt无日期格式字符串如”MM月dd日”参照java的日期格式字符串写法否还有很多其他的属性，与fusioncharts官方版本一致，该封装保留了对原版本的兼容。具体参数的描述请参照官方帮助文档。axesaxes无json数组用于设置坐标轴，为一json数组，大小为1或2，分别用于设置主轴和副轴是axisName无字符串纵轴的描述，同时用作纵轴的label值否serieses无Json数组每一项用于描述一条线是seriesesseriesName无字符串该线的描述是column无字符串从ds中取值的列名是ds无Json数组单独设置该线的数据源否renderAslineline/bar/area单独设置该线的绘图模式， 线，柱，面积图等否还有很多其他的属性，与fusioncharts官方版本一致，该封装保留了对原版本的兼容。具体参数的描述请参照官方帮助文档。另外还可以设置图形的默认样式和动画效果等，举例展示如下： json.styles= definition: style: name:myToolTipFont, type:font, size:40, font:宋体, color:FF0000 , name: myAnim, type: animation, param: _y, start: 0, easing: Bounce, duration: 1 , application: apply: toobject:ToolTip, styles:myToolTipFont , toobject: ANCHORS, styles: myAnim ;想获得更详细的信息请参照fusioncharts官方帮助文档。维护列表日期工作描述2010/10/11添加基本的图形动态修改功能：每条曲线可以单独控制显示与隐藏。该功能需要jquery支持，所以引入Fusioncharts.js前必须先引入jquery库。2010/10/11解决跨浏览器兼容性问题。Firefox，Chrome测试通过。2010/10/11调整执行效率。合并了一些冗余代码。日期格式转化部分存在效率问题。考虑之后替换该模块。2010/10/11增加垂直分区现显示功能。使用Vline模式解决，横轴坐标使用vline的label与横轴原坐标展示模式有冲突，导致坐标原点不能显示label值。2010/10/11修改默认样式将背景色设置为透明，横线设置为虚线2010/10/12解决Vline的label问题。不再使用vline的label改用坐标轴自己的坐标值。（原先由于一个bug导致其不能显示）2010/10/12解决特殊字符乱码的问题主要是seriesesName和axisName中包含特殊字符(如%)时出现的乱码问题2010/10/12计划：默认值调整。影响本页所有图形。未完成201