推荐一款开源的flashchart生成柱状图

cclang2009

最近项目中需要生成类似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的使用很简单。

如下示例：

view plaincopy to clipboardprint?

1. //url形式  
2. function embSwfWithUrl(dataurl,divcon){  
3.      var params = {  
4.         "wmode": "transparent",  
5.         "menu": "false",  
6.         "scale": "noScale",  
7.         "allowFullscreen": "false",  
8.         "allowScriptAccess": "always",  
9.         "bgcolor": "#c0c0c0"  //背景  
10.     };  
11.     var flashvars = {  
12.         'data-file' : dataurl  
13.     };  
14.     swfobject.embedSWF("/swf/open-flash-chart.swf?timestamp=" + Math.random(),divcon, "450", "300", "10.0.0", "./swf/expressInstall.swf" ,flashvars,params);  
15. }  
16.   
17. embSwfWithUrl('http://xxx.com/xxx.html','swfCon');  

//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 数据。

如下示例：

view plaincopy to clipboardprint?

1. //get-data  
2. function embSwfWithData(divcon,getdataFn){  
3.     var params = {  
4.         "wmode": "transparent",  //窗口模式  
5.         "menu": "false",  //菜单显示  
6.         "scale": "noScale",  //缩放  
7.         "allowFullscreen": "false", //允许全屏  
8.         "allowScriptAccess": "always",  //允许脚本  
9.         "bgcolor": "#c0c0c0"  //背景  
10.     };  
11. var flashVar = {  
12.  "get-data":getdataFn  
13. };  
14.     swfobject.embedSWF("/swf/open-flash-chart.swf?timestamp=" + Math.random(), divcon, "450", "300", "10", "/swf/expressInstall.swf",flashVar  ,params);  
15. }  
16.   
17. function getJsonData(){  
18. return 'json data';  
19. }  

//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。