没有合适的资源?快使用搜索试试~ 我知道了~
fusionChart图形,以用ajax封装好,支持json数据。
5星 · 超过95%的资源 需积分: 4 46 下载量 20 浏览量
2010-04-03
23:59:07
上传
评论
收藏 555KB PDF 举报
温馨提示
试读
21页
文档上传,看看适合不适合,如果适合联系我,发源码。 qq:448998966
资源推荐
资源详情
资源评论
FUSIONCHARTS V3 使用
1
1
1
1 、 fusioncharts
fusioncharts
fusioncharts
fusioncharts 的介绍
a
、
fusioncharts 主要用于图形报表,它主要分为 4 类,单列图 (single) 、多列图 (multi)
、
混
合图 ( mixed ) 仪表图 ( meter )
b 、页面展示效果漂亮,使用 xml 数据,他可以和 php , jsp , asp 等结合起来用,非常方
便。
2
2
2
2 、配置 fusioncharts
fusioncharts
fusioncharts
fusioncharts
a 、新建 web 项目,把 fusioncharts 包下的 fcf 、 js 两个文件夹导入项目根目录下。
b 、 把 fusioncharts 中 lib 文件夹下的 e zmorph-1.0.4.jar
、
json-lib-2.2.2-jdk15.jar
、
jsonplu gin-
0.30.jar 、 commons- *. jar ,导入到 web 项目下的 lib 文件夹下,
这些包主要是用于后台 java 数据转化成 json 数据。
如果大家有好的 ajax 框架和 java 数据转换成 json 对象的好框架,可以自行更换。
3
3
3
3 、使用 fusioncharts
fusioncharts
fusioncharts
fusioncharts
a 、在 web 工程下新建一个 fusioncharts.jsp ,导入以下 3 个 js
< script type = "text/javascript" src = "js/ajax/ajax.js" ></ script >
< script type = "text/javascript" src = "fcf/js/
ChangeFusionCharts.js" ></ script >
< script type = "text/javascript" src = "fcf/js/FusionCharts.js" >
</ script >
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 数据
var jsonObject=
[ { "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 、创建报表
a
a
a
a 、 单列报表 single
single
single
single
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 的值作为水果销量的名称。
S eriesname :要显示的值,此处 “ key3 ” 的意思就是取 key3 的值作为要显示的报表
的值
render :页面上 div 或者另外 html 容器的 id ,渲染。
chartType :哪一个报表,是用饼图、线图、还是柱状图、此处我用的是饼图。而这
个 swf 存放的位置就在, fcf/charts/single/Pie3D.swf ,因为此处我们使用
的是单列图所以我们要用到的 swf 文件就要在 single 的文件夹下去找。
改变 chartType:"Column2D.swf" 出现下图
单列报表还有几种,不一一展示了,在 fcf/charts/single 文件夹下的图形都能展示,只 要
改变 chartType 属性就可以了
b
b
b
b 、多列报表 multi
multi
multi
multi
changeData.params({
chan geType:'multi',
objectData: jsonObject,
caption:" 水果月 销量报表 ",
xAxisName:" 月份 " ,
yAxisName:" 销量 " ,
seriesname: { key2: " 苹果 " ,key3: " 梨子 " ,key4: " 香蕉 " } ,
categoryName:"key 1",
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 属性就可以了
剩余20页未读,继续阅读
资源评论
- ppgg8888882013-09-05坑爹,封装的js里面没有啊,还要10分
- hsq543212013-08-06还可以,挺好用的
- cgh47524232013-05-22还行 蛮好用的 哈哈
- antibodys2011-10-14文档不错... 但是几乎没用. 因为文档中涉及的重要js是作者自己写的吧.没有在官网上看到. 收费的吗?
huolanxing
- 粉丝: 1
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功