Fusioncharts画图控件封装_使用手册_第1页
Fusioncharts画图控件封装_使用手册_第2页
Fusioncharts画图控件封装_使用手册_第3页
Fusioncharts画图控件封装_使用手册_第4页
Fusioncharts画图控件封装_使用手册_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

2、要的成图效果的演示点线图柱状图面积图Stacked面积图复合模式饼图环图2 控件部署需要的文件有1).charts文件。在web工程的根目录下建立Chart文件夹（注意大小写），将所有用到的swf文件放到该目录下。2).js文件将FusionCharts.js与dateFmt.js引入系统存放javascript的目录内。此外，该模块需要jquery库的支持，将jquery相关的js文件放入javascript目录内。3).后台数据生成该控件目前只能解析json格式的数据。要求的数据格式如下："data":"RQ":1272643200000,"

3、;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&qu

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

5、acked（目前只支持面积图的堆叠，柱状图的堆叠稍后加入）步骤一：引入文件在页面文件中依次引入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

6、="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方

7、法可将字符串类型的数据转化为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的默认数据源，如果数据源单独指定了，该值将被覆盖。"category":/横坐标设置，用于指定从ds中选取哪一列。ds可

9、以单独指定"column":"RQ",/”ds”:ds,/ds可单独指定"fmt":"MM月dd日"/如果指定该值，程序将把本列作为日期类型处理/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录,"axes":/坐标轴定义，为数组，数组大小为1或2，分别用于设置图形两侧的坐标轴。/第一个对象用于设置靠左边的轴"axisName":"产液",/坐标轴的标题"serieses":/serieses对象用于指定该轴上要画的线，为

10、一个数组，每一项用于描述一条曲线。/第一条线column用于指定从ds中选取哪一列作为数据，ds可单独指定"seriesName":"老井液量",/”ds”:ds,/ds单独指定"column":"VALUE",“color”:”FF0000”,/指定颜色“renderAs”:”bar”/指定绘图模式，支持bar，line，area等/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录,/第二条线"seriesName":"新井液量","column&q

11、uot;:"VALUE2"/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录,/第二个对象用于设置靠右边的轴"axisName":"井数","serieses":"seriesName":"总井数","column":"VALUE3"/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录步骤四：渲染图形调用chart.render函数将图形绘制到页面中。这里的chart为第三步中生成的chart对象。Render

12、函数有两个参数，第一个参数用来指定图形绘制的位置。支持字符串和dom对象两种类型的参数。如果是字符串，将按照该字符串作为ID查找dom对象，否则直接用该dom对象，在该dom对象内绘制图形。第二个参数为一布尔型参数，当该参数为true时，在图形的上方会生成控制曲线显示的复选框。具体代码参见demo中的index.jsp2).饼图饼图的绘制比点线图简单，具体步骤为。步骤一：引入文件，这一步与点线图绘制时相同，参照上面的介绍。步骤二：获取数据，参照点线图的介绍。步骤三：生成图表对象调用FusionCharts.createPieChart()方法生成图形对象。该方法只有一个参数，为json格式数据

13、，下面参照例子对该参数进行详细描述：与点线图相比，该参数要简单许多/饼图"ds":ds,/步骤二中获得的数据"col":"VALUE",/作为数据的列"labelCol":"KEY"/作为分类的列/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录步骤四：渲染图形，参照点线图的介绍。具体代码参见demo中的index.jsp4 注意事项1. 对象属性不区分大小写，但为了便于阅读和避免可能存在的兼容性问题，最好按照附录中的大小写拼写规则进行使用。2. 目前不支持时序图，要想绘制时序图，

14、要求每条数据必须严格按照日期先后排序。3. category和每个series都支持单独设置ds。但是要求每个ds数组的大小必须一致，并且每一行数据都按照业务逻辑对应。5 已知问题列表1. 不支持直方图和平滑曲线图的绘制。这是受限于fusioncharts本身的功能，暂不能解决。2. 不支持原jfreechart的组合图形模式。即多个子图共享同一横轴的模式。只能通过绘制多个图形的方式来代替。3. 不支持用户自定义事件。这也是受到fusioncharts的限制。4. 暂时没有封装图形动态修改功能。比如客户端设置曲线的颜色，显示与隐藏等。5. 暂时没有提供修改默认样式的接口。6. 缺少图片另存为功

15、能。已解决。6 下阶段开发方向1. 改进API，进一步简化常用图形的绘制。2. 添加图形动态修改功能。即可以在客户端对已经绘制完成的图形进行动态配置。3. 开发java版本的图片另存为功能。4. 由于fusioncharts本身的一些限制，很多功能无法实现。接下来将研究另一个开源项目OpenFlashChart看能否解决这些问题。封装API尽量保持与现有模块的兼容。5. 添加对dwr的支持，增强其对jquery的支持，考虑做成jquery插件的形式。附录参数列表XYChart：包括点线图，柱状图，面积图等参数所属对象参数名默认值可选值参数描述是否必须chartwidth无像素数或百分比图形宽度

16、是height无像素数或百分比图形高度是setAdaptiveYMin10/1Y轴最小值自适应否setAdaptiveSYMin10/1Y轴副轴最小值自适应否labelNum5整数横轴label数目，该值会被labelStep覆盖否labelStep由labelNum和记录条数计算所得整数横轴label的间隔否legendPositionRIGHTRIGHTBOTTOM图例的显示位置否renderAslineline/bar/area绘图模式， 线，柱，面积图。该值的设置影响到图的条线的绘制否stacked00/1是否堆叠否showXlabel00/1是否显示横轴label否showYlabe

17、l10/1是否显示纵轴label否showValues10/1是否在图形上显示值否bgColorFFFFFF,000000去掉#的颜色值背景色，可以设置色彩过渡，通过逗号间隔否divLineColor8CB1FF去掉#的颜色值水平线颜色否anchorAlpha00-100锚点的透明度，设置为0为不显示锚点，但保留热区还有很多其他的属性，与fusioncharts官方版本一致，该封装保留了对原版本的兼容。具体参数的描述请参照官方帮助文档。dsds无Json格式的数据数据源，如果category和serieses不单独设置ds的话，都会使用该ds否categorycolumn无字符串ds中用于作为

18、横轴的列名是ds无Json格式的数据json格式的数据源该值会覆盖图表的ds否fmt无日期格式字符串如”MM月dd日”参照java的日期格式字符串写法否还有很多其他的属性，与fusioncharts官方版本一致，该封装保留了对原版本的兼容。具体参数的描述请参照官方帮助文档。axesaxes无json数组用于设置坐标轴，为一json数组，大小为1或2，分别用于设置主轴和副轴是axisName无字符串纵轴的描述，同时用作纵轴的label值否serieses无Json数组每一项用于描述一条线是seriesesseriesName无字符串该线的描述是column无字符串从ds中取值的列名是ds无Jso

19、n数组单独设置该线的数据源否renderAslineline/bar/area单独设置该线的绘图模式， 线，柱，面积图等否还有很多其他的属性，与fusioncharts官方版本一致，该封装保留了对原版本的兼容。具体参数的描述请参照官方帮助文档。另外还可以设置图形的默认样式和动画效果等，举例展示如下： json.styles= "definition": "style": "name":"myToolTipFont", "type":"font", "size&quo

20、t;:"40", "font":"宋体", "color":"FF0000" , "name": "myAnim", "type": "animation", "param": "_y", "start": "0", "easing": "Bounce", "duration":

21、 "1" , "application": "apply": "toobject":"ToolTip", "styles":"myToolTipFont" , "toobject": "ANCHORS", "styles": "myAnim" ;想获得更详细的信息请参照fusioncharts官方帮助文档。维护列表日期工作描述2010/10/11添加基本的图形动态修改功能：每条曲线可以单独控制显示与隐藏。该功能需

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论