FUSIONCHARTS V3 使用


FUSIONCHARTS V3 使用 1111、fusionchartsfusionchartsfusionchartsfusioncharts的介绍 a、fusioncharts 主要用于图形报表, 它主要分为 4类, 单列图 (single)、 多列图 (multi)、混 合图 (mixed) 仪表图 (meter) b、页面展示效果漂亮,使用 xml 数据,他可以和 php,jsp,asp 等结合起来用,非常方 便。 2222、配 置 fusionchartsfusionchartsfusionchartsfusioncharts a、新 建 web 项目 , 把 fusioncharts 包下 的 fcf、js 两个 文件夹导入项目根目录下。 b、把fusioncharts 中lib文件夹下的 ezmorph-1.0.4.jar、json-lib-2.2.2-jdk15.jar、jsonplugin- 0.30.jar、commons-*.jar,导入到 web 项目下的 lib文件夹下, 这些包主要是用于后台 java 数据转化成 json 数据。 如果大家有好的 ajax 框架和 java 数据转换成 json 对象的好框架,可以自行更换。 3333、使 用 fusionchartsfusionchartsfusionchartsfusioncharts a、在 web 工程下新建一个 fusioncharts.jsp,导入以下 3个js ajax.js 主要是用来发送 ajax 请求获取 json 数据 ( 下面的图列我使用的是静态数据 所 以ajax.js 可以不用导入) ChangeFusionCharts.js 主要用来转换 json 数据, 变成 xml 数据 ( fusioncharts 所需 要 的格式) FusionCharts.js 图形和数据绑定交互的 js b、所有 js 引入后,开始创建第一个 fusioncharts 报表 请确保所有的 js 都加在完成后,才加载此 js,最好是在此 js 上加上 defer="defer" 1、在 fusioncharts.jsp 中,建立数据源, json 数据 varjsonObject= [{"key1":"1month","key3":5,"key2":2,"key4":5}, {"key1":"2month","key3":10,"key2":4,"key4":2}, {"key1":"3month","key3":4.5,"key2":6,"key4":1}, {"key1":"4month","key3":20,"key2":8,"key4":12}]; 2、创建报表 aaaa、单列报 表 singlesinglesinglesingle changeData.params({ changeType:'single', objectData:jsonObject, caption:"水果月销量报表 ", xAxisName:"月份 ", yAxisName:"销量 ", seriesname:"key3", categoryName:"key1", showValues:"0", render:"single_fcf_div", chartType:"Pie3D.swf" }); changeType:报表类型 single 单列图 ,,multi 多列图,混合图 mixed。 caption:图表标题。 xAxisName:横坐标标题。 (饼图不支持 ) yAxisName:纵坐标标题。 (饼图不支持 ) objectData:数据源,必须为 json 对象的数组。 categoryName:名称 “此处 key1”的意思就是取 key1 的值作为水果销量的名称。 Seriesname:要显示的值,此处 “key3”的意思就是取 key3 的值作为要显示的报表 的值 render:页面上 div 或者另外 html 容器的 id,渲染。 chartType:哪一个报表,是用饼图、线图、还是柱状图、此处我用的是饼图。而这 个swf 存放的位置就在, fcf/charts/single/Pie3D.swf,因为此处我们使用 的是单列图所以我们要用到的 swf 文件就要在 single 的文件夹下去找。 改变 chartType:"Column2D.swf" 出现下图 单列报表还有几种, 不 一一展示了,在 fcf/charts/single 文件夹下的图形都能展示, 只 要 改变 chartType属性就可以了 bbbb、多列报表 multimultimultimulti changeData.params({ changeType:'multi', objectData: jsonObject, caption:"水果月 销量报表 ", xAxisName:"月份 ", yAxisName:"销量 ", seriesname:{key2:"苹果 ",key3:"梨子 ",key4:"香蕉 "}, categoryName:"key1",1",1",1", showValues:"0", render:" multi _fcf_div", chartType:"MSColumn2D.swf" }); 其中很多都是与单列报表相同,说下与单列报表的不同之处 changeType:”multi” 表示是多列报表 seriesname:单列报表只有一列,而多列报表要展示多列,所以传入的数据格 式在这里定义为一个 json 对象, key2 代表要显示的列,“苹果 ”代表此列的 名 字,以此类推,最后显示出来的图形如下。 而在这里 seriesname 的另外一种配置方法是 : seriesname:["苹果 ","梨子 ","香蕉 "] 你也可以不用指 定列名 ,但是 这种配 置方法 一定要 和数据 一一对 应起来 ,要不 然 很容易错位。 改变 chartType:"MSLine.swf" 出现下图 改变 chartType:"StackedBar2D.swf" 出现下图 多列报表还有几种, 不一一展 示了, 在 fcf/charts/ multi 文件夹下的图形都能 展示, 只要改变 chartType属性就可以了 b-1:b-1:b-1:b-1:动态移动图形 这里我把动态移动图形归类到了多列报表中 ,大家来看看,动态移动图形的配 置 changeData.params({ changeType:'multi', xAxisName:"时间 ", yAxisName:"金钱 ", refreshInterval:"3", dataStreamURL:"/FusionChartsV3/data.jsp", seriesname:["苹果 ","梨子 "], labelDisplay:"Rotate", render:"multi_fcf_div", chartType:"RealTimeLine.swf" }); refreshInterval:"3",刷新时间 ,每隔 3秒钟刷新一次 dataStreamURL:"/FusionChartsV3/data.jsp",刷新时动态数据 的 来源 data.jsp中的代码如下 out.print(out.print(out.print(out.print(““““&label=10:12:00&value=30|58|&label=10:12:00&value=30|58|&label=10:12:00&value=30|58|&label=10:12:00&value=30|58|””””);););); 如果 dataStreamURLdataStreamURLdataStreamURLdataStreamURL中出 现了 &&&&符号 请注 意用 %26%26%26%26来代 替如 : 如图: 这时图形是以每 3秒钟的时间从左 往右不 断的移 动的。 改变图形的 chartType:”RealTimeColumn.swf” 如图 cccc、混合报表 multimultimultimulti 混合报表主要分为柱、线的混合,和柱、线、面积的混合。 其中还分有单 Y轴和双 Y轴 下面来看具体例子 changeData.params({ changeType:'mixed', objectData:rs, caption:"水果月 销量报表 ", xAxisName:"月份 ", yAxisName:"销量 ", seriesname:{key2:"梨子 ",key3:"香蕉 ",key4:"总数 "}, categoryName:"key1", additional:["key4"],"],"],"], showValues:"0", render:"mixed_fcf_div", chartType:"MSColumn3DLineDY.swf" }); changeType:”mixed” 表示混合报表 其余的大部分属性和多列报表没有太多的区别,主要看 additional 这个属性我放了一 个js 的数组, 但 是只有一个数据 ”key4” 那么这行主要的意思就是 ”key4”的值作为柱、 线 混 合报表的线性图来展示 , seriesname:["苹果 ","梨子 ","香蕉 "] 你也可以不用指 定列名, 但是这种配置方法一定 要和数 据一一 对应起 来, 要不然很容易错 位。 如图: 我们看到这是图形已经出来, key4 的值作为线图, 这 是一个双 Y轴图形, 柱 状表 示 苹果、 梨 子的销量、 而 线图则表示总数, 而 要注意的是线性图所对应的坐标是右边 , 而不是左边的。 (非正常数据 ) 上面的additional 属性,js 数组中我只放了一个值,如果我放两个值 additional:["key3","key4"],这时出现的图形就变成这样了。如图 : aditional 这个属性的意思就是,哪一列的值,需要用线性图来表示。 hartType:”StackedColumn3DLineDY.swf” aditional:”key4” 效果图: 双Y轴的看了,来看看单 Y轴的,改变 chartType:”MSColumnLine3D.swf” 只有一个 Y轴,柱状图和线图使用的都是同一个 Y轴。 下面来看看柱、线、面积的混合图。 changeData.params({ changeType:'mixed', objectData:rs, caption:"水果月 销量报表 ", xAxisName:"月份 ", yAxisName:"销量 ", seriesname:{key2:"梨子 ",key3:"香蕉 ",key4:"总数 "}, categoryName:"key1", additional:{"key3":"Area","key4":"Line"},"},"},"}, showValues:"0", render:"mixed_fcf_div", chartType:"MSCombiDY2D.swf" }); 主要看 additional 这个属性,他与柱,线混合图的不同之处在于,我这次传递的是一 个json 对象, 里 面的 key3:”Area” key4:”Line”表示的意思就是, key3 这一列我用面积 图, key4 这一列我用线图, seriesname:["苹果 ","梨子 ","香蕉 "] 你也可以不用指 定列名, 但是这种配置方法一定 要和数 据一一 对应起 来, 要不然很容易错 位。 如图: 多Y轴的 chartType:"MSCombiDY2D.swf" 如图: 柱图对应左边刻度,线性图和面积图对应右边刻度。 d:d:d:d:仪表图 很多时候我们都要用到仪表图,下面我们来看看仪表图的配置 changeData.params({ changeType:'meter', maxValue:"100", dialValue:30, width:"400", height:"200", render:"meter_fcf_div", chartType:"AngularGauge.swf" }); 因为我这里都只有单仪表图,所以我这里不需要数据集。 changeType:meter 代表是仪表图 maxValue:最大值 dialValue:要显示的值 下面看看图形: 改变 chartType:HLinearGauge.swf 如图 改变 chartType:Cylinder.swf 如图: 仪表图出来了下面看看如何让仪表图动起来,设置两个属性,就能动起来了。 refreshInterval:”3”, dataStreamURL:”/FusionChartsV3/data.jsp”, 其中 data.jsp 的类容为: out.printout.printout.printout.print((((““““&value=10|&value=10|&value=10|&value=10|””””);););); 大家看到 &value=10 后面有个 “|”这个是一定要加上去的。把这些加上后仪 表图就能动 起来了,这样设置只对第一和第二个图有作用,对第三个 Cylinder.swf没有作用。 如果 dataStreamURLdataStreamURLdataStreamURLdataStreamURL中出 现了 &&&&符号 请注 意用 %26%26%26%26来代 替如 : 告警处理: 大多数的图形都会有一种告警的的处理,超过一定刻度之后给出一条告警线 这是一段多列图的代码,其中有一个属性仔细看看,就 是 alarmValue:15 这个就是告警线的 表示:如图: 这其中, 还有两个属性, alarmName、alarmColor 其中一个设置左边的告警线的文字, 一 个 设置告警线的颜色。 图形展示一般以动态数据居多, 所 以下面来看一下, ajax 发送请求从后台取出数据, 然 后 前 台展示图形的一套完 整的流程 ,其 中 ajax 我已封装,后 台 java 数据转化成 json 数据是用 jsonplugin 来转换的, 这些自己都可随意更换,关键是前台展示的数据必须是 json 数组的 形 式 前面提到过配置时的 js 和后台所需的包都已导入,下面看代码。 Java 代码 FcfAction 从数据库去数据, 我就不写了, 这里我利用 for 循环产生一点数据, 然后放到 map 中, 利 用 jsonplugin 转化成 js 所需要的 json 数据。最后产生的数据就是这个样子: 前台 Js代码 fusioncharts.jsp 最后出来的图形: 数据 说明 :::: 有时候后台给出 的数据 有可能 是 List的形式,而不是 List、List 的类型,如: varjsonArray=[[1,2,3,5],[4,5,6,3],[7,8,9,6]]; 这时候我们的图 形也会 支持 我们只要这样配 置也一 样的能 把图形 配置出 来如: changeData.params({ changeType:'single', objectData:jsonArray, caption:"水果月销量报表 ", seriesname:"1", categoryName:"0", render:"multi_fcf_div", chartType:"Pie3D.swf" }); 图形: 其实就是就是给 出 list中的下标就可以 了。多 列报表 ,混合 报表, 与之雷 同。 所有的图形都能 手动给 categoryName但是这就需要自 己清楚 一共有 多少个 数组, 如: 我把 categoryName去掉,加上 cloums:["苹果 ","梨子 ","香蕉 "], 如图 多列报表,混合 报表, 一样的 图表 说明 : FusionChartsV3使用的 xml数据节点分为两 类 单列报表: 多列报表和混合 报表: 其中在构造图形 时,我 已经写 好了一 些基本 属性接 口,大 家只要 设置一 下就可 以: animation:1/0图形显示时是否 有动画 的形式 ,默认 是 1,也就是有动画 效果。 caption:String图形显示的标题 xAxisName:String横坐标文字描述 yAxisName:String纵坐标文字描述 baseFontSize:字体大小 默认为 12px baseFont:字体 默认为宋体 baseFontColor:字体颜色默认为 黑色 showValue:1/0是否显示图表节 点上的 文字 默认为 1显示 labelDisplay:"Rotate"横坐标是否旋转 useRoundEdges为2D图的时候 样式的变化 1/0 numberSuffix数据前缀单位 如果要设置为 %应设置为 %25 yAxisMaxValuey轴最大值 当chrtType为AngularGauge.swf 有另外两个属性 : showTickMarks是否显示数值, cylFillColor背景色 cloums:手动设置 x轴的文字显示,如 :["一月 ","二月 "]设置此属性的时 候, categoryName 属性不必设置。 alarmValue:设置告警线的值 是多少 alarmName:告警线的名称 alarmColor :告警线的颜色 上面介绍的是几 个基本 的属性 接口 ,可以直接在 js代码中直接写入 设置 有一些扩展属性 ,我这 里给大 家提供 了 5个扩展属性的接 口 chartAtributes setAtributes datasetAtributes categoriesAtributes categoryAtributes 这几个扩展属性 ,根据 名称我 们就可 以知道 他是根 据 xml节点的名称得来 的, 如果你有几个属 性要加 上 而基本属性 接口 里面又没有你要 找的 ,那么你就可以这 样来设 置: 如果你要添加的 属性在 chart这个节点里面那 么你就 可以这 样设置 : chartAtributes:"lineThickness='1'subcaption='子标题 '" 设置的里面第一 个属性 开头一 定要先 空隔, 扩展属性就加进 去了 以此类推: setAtributes为set节点添加扩展属 性的 datasetAtributes为dataset节点添加扩展属 性的 categoriesAtributes为categories节点添加扩展属 性的 categoryAtributes为category节点添加扩展属 性的 图形的介绍 : 看到 fcf/charts下的 3个文件夹 mixed、multi、single分别代表 单,多,混。 其中的英文单词 应该都 熟悉, 在此介 绍下( 其中有 些图分 为 2D和3D) Area2D.swf面积图 Bar2D.swf酒吧图(原英文 翻译) 我的理 解为 横向的柱状图 Column2D.swf柱状图 Doughnut2D.swf甜圈图 Line.swf线形图 Pie2D.swf饼图 SSGrid.swf一个表格(貌似 没有太 多作用 ) 当你的 changeType的属性设置为 single时, 就只能用这个文 件夹下 面的图 形。 以此类推 multi下的为多列图 名字和单列没有 太多的 区别, 只是前 面加了 个 MS,而加了 Scroll就是带滚动条的 多列图 形 这里着重讲一下 混合图 ( mixed) 混合图以 MSCombi开头的为 (柱、 线、 面积 )混合图设置的时 候 additional要设置成 json对象 的形式 如: {key1:"Area",key2:"Line"} 而其中有 MS*Line几个英文字母的 就是柱 、线混 合图 那么设置 additional的时候 设置成 ["key1"]一个字符串数组,表示 key1以线图的形式展 示 如果这两种图的 里面含 有 DY,那这种就是双 Y轴的的混合图, 反之则 是单 Y轴的
还剩20页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

luxiaogang

贡献于2012-07-09

下载需要 15 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf