《fusioncharts画图控件封装_使用手册》由会员分享，可在线阅读，更多相关《fusioncharts画图控件封装_使用手册（9页珍藏版）》请在金锄头文库上搜索。
1、Fusioncharts 画图控件封装画图控件封装使用手册使用手册1 功能描述功能描述本控件的主要用途是编写一套强大、美观、易用的曲线生成工具，用以简化现有项目 中相关的曲线开发工作。 该控件基于时下流行的 flash 画图工具 Fusioncharts3.1 开发。支持折线图，柱状图，饼 图，面积图等常用图形的绘制（暂不支持直方图和平滑曲线） 。图形为客户端动态绘制，可 以实现动态缩放，动画效果等，生成的图形美观大方。 该控件完全基于 javascript 开发，实现了平台无关性，同时由于生成的图形为客户端动 态绘制，热点数据等不需要单独进行传输管理，因此成图效率很高，解决了 jfreech
2、ar 等工 具由于热点数据导致页面执行效率低下的问题。 以下为主要的成图效果的演示 点线图柱状图面积图Stacked 面积图复合模式饼图环图2 控件部署控件部署需要的文件有 1).charts 文件。 在 web 工程的根目录下建立 Chart 文件夹（注意大小写） ，将所有用到的 swf 文件放到 该目录下。 2).js 文件 将 FusionCharts.js 与 dateFmt.js 引入系统存放 javascript 的目录内。此外，该模块需要 jquery 库的支持，将 jquery 相关的 js 文件放入 javascript 目录内。3).后台数据生成 该控件目前只能解析 jso
3、n 格式的数据。要求的数据格式如下： “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 对象， 封装了每条记
4、录的所有数据。 注意：为了便于日期型数据的展示，所有的日期型数据都必须通过 getTime 方法转化为 毫秒数。 后台数据只要能够生成上述模式的数据即可，与平台无关。demo 中提供了 java 语言的 默认实现，如果要使用请将 json.jar 文件引入引入系统类路径。该 jar 包基于 org.json 包进 行修改得来，其中 JSONObject 对象可以直接将 List（每项为 Map）数据转化为满足画图需 要的 json 数据。3 开始绘图开始绘图1).点线图，柱状图，面积图，stacked（目前只支持面积图的堆叠，柱状图的堆叠稍后加入）步骤一：引入文件 在页面文件中依次引入 jqu
5、ery.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 步骤三：
6、生成图表对象 调用FusionCharts.createXYChart()方法生成图形对象。该方法只有一个参数，为json格式数据，下面参照例子对该参数进行详细描述。 “chart“:/char对象，封装全图级别的信息 “width“:“90%“,/宽度，可按照像素或百分比设置 “height“:“300“,/高度，可按照像素或百分比设置 “caption“:“产量趋势“,/标题，将显示在图形上方 “xAxisName“:“日期“,/横轴描述，将在坐标轴下方（默认隐藏）和鼠标提示中用到 “renderAs”:”line”/指定绘图模式，支持bar，line，area等，默认为line /其他的
7、一些属性，如果默认值不能满足要求可以单独设置，具体见附录 ,“ds“:ds,/数据，为上一步生成的json格式的数据。该数据作为category和各个serieses的 默认数据源，如果数据源单独指定了，该值将被覆盖。 “category“:/横坐标设置，用于指定从ds中选取哪一列。ds可以单独指定 “column“:“RQ“,/”ds”:ds,/ds可单独指定 “fmt“:“MM月dd日“/如果指定该值，程序将把本列作为日期类型处理 /其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录 ,“axes“:/坐标轴定义，为数组，数组大小为1或2，分别用于设置图形两侧的坐标轴。 /第一
8、个对象用于设置靠左边的轴 “axisName“:“产液“,/坐标轴的标题 “serieses“:/serieses对象用于指定该轴上要画的线，为一个数组，每一项用于 描述一条曲线。 /第一条线column用于指定从ds中选取哪一列作为数据，ds可单独指定 “seriesName“:“老井液量“, /”ds”:ds,/ds单独指定 “column“:“VALUE“,“color”:”FF0000”,/指定颜色 “renderAs”:”bar”/指定绘图模式，支持bar，line，area等 /其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附 录 ,/第二条线 “seriesName“
9、:“新井液量“, “column“:“VALUE2“ /其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录 ,/第二个对象用于设置靠右边的轴 “axisName“:“井数“, “serieses“:“seriesName“:“总井数“, “column“:“VALUE3“ /其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录 步骤四：渲染图形 调用chart.render函数将图形绘制到页面中。这里的chart为第三步中生成的chart对象。 Render函数有两个参数，第一个参数用来指定图形绘制的位置。支持字符串和dom对象 两种类型的参数。如果是字符串，将按照该字符
10、串作为ID查找dom对象，否则直接用该dom 对象，在该dom对象内绘制图形。 第二个参数为一布尔型参数，当该参数为true时，在图形的上方会生成控制曲线显示的 复选框。 具体代码参见demo中的index.jsp 2).饼图 饼图的绘制比点线图简单，具体步骤为。 步骤一：引入文件，这一步与点线图绘制时相同，参照上面的介绍。 步骤二：获取数据，参照点线图的介绍。 步骤三：生成图表对象 调用FusionCharts.createPieChart()方法生成图形对象。该方法只有一个参数，为json格式数据，下面参照例子对该参数进行详细描述： 与点线图相比，该参数要简单许多/饼图“ds“:ds,/步
11、骤二中获得的数据“col“:“VALUE“,/作为数据的列“labelCol“:“KEY“/作为分类的列/其他的一些属性，如果默认值不能满足要求可以单独设置，具体见附录 步骤四：渲染图形，参照点线图的介绍。 具体代码参见demo中的index.jsp4 注意事项注意事项1.对象属性不区分大小写，但为了便于阅读和避免可能存在的兼容性问题，最好按照附录 中的大小写拼写规则进行使用。 2. 目前不支持时序图，要想绘制时序图，要求每条数据必须严格按照日期先后排序。 3.category 和每个 series 都支持单独设置 ds。但是要求每个 ds 数组的大小必须一致，并 且每一行数据都按照业务逻辑对
12、应。5 已知问题列表已知问题列表1.不支持直方图和平滑曲线图的绘制。这是受限于 fusioncharts 本身的功能，暂不能解决。2.不支持原 jfreechart 的组合图形模式。即多个子图共享同一横轴的模式。只能通过绘制 多个图形的方式来代替。 3.不支持用户自定义事件。这也是受到 fusioncharts 的限制。4.暂时没有封装图形动态修改功能。比如客户端设置曲线的颜色，显示与隐藏等。 5.暂时没有提供修改默认样式的接口。 6.缺少图片另存为功能。已解决。6 下阶段开发方向下阶段开发方向1.改进 API，进一步简化常用图形的绘制。 2.添加图形动态修改功能。即可以在客户端对已经绘制完成
13、的图形进行动态配置。 3.开发 java 版本的图片另存为功能。 4.由于 fusioncharts 本身的一些限制，很多功能无法实现。接下来将研究另一个开源项目 OpenFlashChart 看能否解决这些问题。封装 API 尽量保持与现有模块的兼容。 5.添加对 dwr 的支持，增强其对 jquery 的支持，考虑做成 jquery 插件的形式。附录附录参数列表 XYChart：包括点线图，柱状图，面积图等参数所 属对象参数名默认值可选值参数描述是 否 必 须width无像素数或百分比图形宽度是height无像素数或百分比图形高度是setAdaptiveYMin10/1Y 轴最小值自适应否
14、setAdaptiveSYMi n10/1Y 轴副轴最小值自适应否labelNum5整数横轴 label 数目，该值会被 labelStep 覆盖否labelStep由 labelNum和记录条数 计算所得整数横轴 label 的间隔否legendPositionRIGHTRIGHT BOTTOM图例的显示位置否renderAslineline/bar/are a绘图模式， 线， 柱，面积图。该值 的设置影响到图的 条线的绘制否stacked00/1是否堆叠否chartshowXlabel00/1是否显示横轴 label否showYlabel10/1是否显示纵轴 label否showValue
15、s10/1是否在图形上显示值否bgColorFFFFFF,0000 00去掉#的颜 色值背景色，可以设置 色彩过渡，通过逗 号间隔否divLineColor8CB1FF去掉#的颜色值水平线颜色否anchorAlpha00-100锚点的透明度，设置为 0 为不显示锚 点，但保留热区还有很多其他的属性，与 fusioncharts 官方版本一致，该封装保留了对原 版本的兼容。具体参数的描述请参照官方帮助文档。dsds无Json 格式的数 据数据源，如果 category 和 serieses 不单独设置 ds 的话， 都会使用该 ds否column无字符串ds 中用于作为横轴的列名是ds无Json
16、 格式的数 据json 格式的数据源 该值会覆盖图表的 ds否fmt无日期格式字符 串如”MM 月 dd 日” 参照 java 的日期格 式字符串写法否categor y还有很多其他的属性，与 fusioncharts 官方版本一致，该封装保留了对原 版本的兼容。具体参数的描述请参照官方帮助文档。axes无json 数组用于设置坐标轴，为一 json 数组，大 小为 1 或 2，分别用 于设置主轴和副轴是axisName无字符串纵轴的描述，同时用作纵轴的 label 值否serieses无Json 数组每一项用于描述一 条线是axesseriesName无字符串该线的描述是column无字符串从 ds 中取值的列名是ds无Json 数组单独设置该线的数 据源否seriesesrenderAslineline/bar/ area单独设置该线的绘 图模式， 线，柱， 面积图等否还有很多其他的属性，与 fusioncharts
