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

cclang2009 发表于 2011-12-22 08:54

<div class="entry">
最近项目中需要生成类似excel的柱状图、饼图、趋势图等等。。。
网上<a href="http://www.gosoa.com.cn/category/google" title="google" target="_blank">google</a>了一番，发现了 Open Flash Chart   地址：  <a href="http://teethgrinder.co.uk/open-flash-chart-2/" target="_blank">http://teethgrinder.co.uk/open-flash-chart-2/</a> 。
非常好用的一款开源工具。目前最新版是2.0
——————————————————————————–
<a href="http://ofcgwt.googlecode.com/svn/demo/Demo.html" target="_blank">http://ofcgwt.googlecode.com/svn/demo/Demo.html</a> 这里有很多示例可供参考。
不过不太推荐使用 googlecode上的这个示例代码，建议采用官方的示例代码和flash chart 。
flash chart的使用很简单。
如下示例：
<div class="dp-highlighter"><div class="bar"><div class="tools"><a href="http://www.gosoa.com.cn/%E6%8E%A8%E8%8D%90%E4%B8%80%E6%AC%BE%E5%BC%80%E6%BA%90%E7%9A%84flashchart%E7%94%9F%E6%88%90%E6%9F%B1%E7%8A%B6%E5%9B%BE/#" target="_blank">view plain</a><a href="http://www.gosoa.com.cn/%E6%8E%A8%E8%8D%90%E4%B8%80%E6%AC%BE%E5%BC%80%E6%BA%90%E7%9A%84flashchart%E7%94%9F%E6%88%90%E6%9F%B1%E7%8A%B6%E5%9B%BE/#" target="_blank">copy to clipboard</a><a href="http://www.gosoa.com.cn/%E6%8E%A8%E8%8D%90%E4%B8%80%E6%AC%BE%E5%BC%80%E6%BA%90%E7%9A%84flashchart%E7%94%9F%E6%88%90%E6%9F%B1%E7%8A%B6%E5%9B%BE/#" target="_blank">print</a><a href="http://www.gosoa.com.cn/%E6%8E%A8%E8%8D%90%E4%B8%80%E6%AC%BE%E5%BC%80%E6%BA%90%E7%9A%84flashchart%E7%94%9F%E6%88%90%E6%9F%B1%E7%8A%B6%E5%9B%BE/#" target="_blank">?</a></div></div><ol class="dp-c" start="1"><li class="alt">//url形式  </li><li class="">function embSwfWithUrl(dataurl,divcon){  </li><li class="alt">     var params = {  </li><li class="">        "wmode": "transparent",  </li><li class="alt">        "menu": "false",  </li><li class="">        "scale": "noScale",  </li><li class="alt">        "allowFullscreen": "false",  </li><li class="">        "allowScriptAccess": "always",  </li><li class="alt">        "bgcolor": "#c0c0c0"  //背景  </li><li class="">    };  </li><li class="alt">    var flashvars = {  </li><li class="">        'data-file' : dataurl  </li><li class="alt">    };  </li><li class="">    swfobject.embedSWF("/swf/open-flash-chart.swf?timestamp=" + Math.random(),divcon, "450", "300", "10.0.0", "./swf/expressInstall.swf" ,flashvars,params);  </li><li class="alt">}  </li><li class="">  </li><li class="alt">embSwfWithUrl('http://xxx.com/xxx.html','swfCon');  </li></ol></div>//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的类。<a href="http://code.google.com/p/swfobject/" target="_blank">http://code.google.com/p/swfobject/</a>
——————————————————————————–
注意下，flash chart 获得数据的方式有两种，
一种是   data-file  一种是 get-data
data-file 正是如上示例，值必须是个 url地址，里面返回的是 json数据。
而get-data的值则是一个函数名称。函数返回 json 数据。
如下示例：
<div class="dp-highlighter"><div class="bar"><div class="tools"><a href="http://www.gosoa.com.cn/%E6%8E%A8%E8%8D%90%E4%B8%80%E6%AC%BE%E5%BC%80%E6%BA%90%E7%9A%84flashchart%E7%94%9F%E6%88%90%E6%9F%B1%E7%8A%B6%E5%9B%BE/#" target="_blank">view plain</a><a href="http://www.gosoa.com.cn/%E6%8E%A8%E8%8D%90%E4%B8%80%E6%AC%BE%E5%BC%80%E6%BA%90%E7%9A%84flashchart%E7%94%9F%E6%88%90%E6%9F%B1%E7%8A%B6%E5%9B%BE/#" target="_blank">copy to clipboard</a><a href="http://www.gosoa.com.cn/%E6%8E%A8%E8%8D%90%E4%B8%80%E6%AC%BE%E5%BC%80%E6%BA%90%E7%9A%84flashchart%E7%94%9F%E6%88%90%E6%9F%B1%E7%8A%B6%E5%9B%BE/#" target="_blank">print</a><a href="http://www.gosoa.com.cn/%E6%8E%A8%E8%8D%90%E4%B8%80%E6%AC%BE%E5%BC%80%E6%BA%90%E7%9A%84flashchart%E7%94%9F%E6%88%90%E6%9F%B1%E7%8A%B6%E5%9B%BE/#" target="_blank">?</a></div></div><ol class="dp-c" start="1"><li class="alt">//get-data  </li><li class="">function embSwfWithData(divcon,getdataFn){  </li><li class="alt">    var params = {  </li><li class="">        "wmode": "transparent",  //窗口模式  </li><li class="alt">        "menu": "false",  //菜单显示  </li><li class="">        "scale": "noScale",  //缩放  </li><li class="alt">        "allowFullscreen": "false", //允许全屏  </li><li class="">        "allowScriptAccess": "always",  //允许脚本  </li><li class="alt">        "bgcolor": "#c0c0c0"  //背景  </li><li class="">    };  </li><li class="alt">var flashVar = {  </li><li class=""> "get-data":getdataFn  </li><li class="alt">};  </li><li class="">    swfobject.embedSWF("/swf/open-flash-chart.swf?timestamp=" + Math.random(), divcon, "450", "300", "10", "/swf/expressInstall.swf",flashVar  ,params);  </li><li class="alt">}  </li><li class="">  </li><li class="alt">function getJsonData(){  </li><li class="">return 'json data';  </li><li class="alt">}  </li></ol></div>//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。

</div>

页: [1]

Chinaunix's Archiver

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