推荐一款开源的flashchart生成柱状图
最近项目中需要生成类似excel的柱状图、饼图、趋势图等等。。。
网上google了一番,发现了 Open Flash Chart 地址: http://teethgrinder.co.uk/open-flash-chart-2/ 。
非常好用的一款开源工具。目前最新版是2.0
——————————————————————————-
http://ofcgwt.googlecode.com/svn/demo/Demo.html 这里有很多示例可供参考。
不过不太推荐使用 googlecode上的这个示例代码,建议采用官方的示例代码和flash chart 。
flash chart的使用很简单。
如下示例:
//url形式 function embSwfWithUrl(dataurl,divcon){ var params = { "wmode": "transparent", "menu": "false", "scale": "noScale", "allowFullscreen": "false", "allowScriptAccess": "always", "bgcolor": "#c0c0c0" //背景 }; var flashvars = { 'data-file' : dataurl }; swfobject.embedSWF("/swf/open-flash-chart.swf?timestamp=" + Math.random(),divcon, "450", "300", "10.0.0", "./swf/expressInstall.swf" ,flashvars,params); } embSwfWithUrl('http://xxx.com/xxx.html','swfCon');
这里的http://xxx.com/xxx.html返回的是相应的json格式的数据。
swfCon是放flash的div容器。
swfobject是开源的js处理flash的类。http://code.google.com/p/swfobject/
——————————————————————————-
注意下,flash chart 获得数据的方式有两种,
一种是 data-file 一种是 get-data
data-file 正是如上示例,值必须是个 url地址,里面返回的是 json数据。
而get-data的值则是一个函数名称。 函数返回 json 数据。
如下示例:
//get-data function embSwfWithData(divcon,getdataFn){ var params = { "wmode": "transparent", //窗口模式 "menu": "false", //菜单显示 "scale": "noScale", //缩放 "allowFullscreen": "false", //允许全屏 "allowScriptAccess": "always", //允许脚本 "bgcolor": "#c0c0c0" //背景 }; var flashVar = { "get-data":getdataFn }; swfobject.embedSWF("/swf/open-flash-chart.swf?timestamp=" + Math.random(), divcon, "450", "300", "10", "/swf/expressInstall.swf",flashVar ,params); } function getJsonData(){ return 'json data'; }
这里 “get-data”:getdataFn 需要传递的就是一个函数名称。函数中返回json数据。
还有一点需要注意下,/swf/open-flash-chart.swf?timestamp=+Math.random() .
这里之所以加随机数,是因为有的浏览器在缓存flash后,使其flash参数失效了。加上随机数后,每次浏览器会重新加载flash。
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:scofield 来源: 潘少宁的博客
- 标签: flashchart 柱状图
- 发布时间:2012-02-26 23:20:11
- [65] Oracle MTS模式下 进程地址与会话信
- [65] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] android 开发入门
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 图书馆的世界纪录
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则