技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> PHP --> 推荐一款开源的flashchart生成柱状图

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

浏览:2018次  出处信息

最近项目中需要生成类似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。

QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1