读书人

Open Flash Chart2施用(实现flash另存

发布时间: 2012-10-07 17:28:51 作者: rapoo

Open Flash Chart2应用(实现flash另存为图片)
blog迁移至:http://www.micmiu.com

Open Flash Chart2 与1.x版本最大不同之处在于可以把数据格式改成JSON,可以很方便的运用Ajax实现动态加载数据,
同时可以把生成的flash保存成图片(这个功能很实用)。
下面图文并茂一步一步详细介绍Open Flash Chart2的应用。
一、官网及相关下载的网站Open Flash Chart2 的官网:http://teethgrinder.co.uk/open-flash-chart-2/JOFC2:http://code.google.com/p/jofc2/http://sourceforge.net/projects/openflashchart/本文附件也提供了一份已经整理好的下载,见附近ofc2相关组件。

二、HTML页面用JSON数据直接生成flash。


效果如下图:



三、页面Ajax动态读取数据生成flash。
java类中用到了jofc2-1.0-0.jar这个类


效果图如下:



四、通过javascript把flash保存成图片。
下面介绍如何将生成的flash另存为图片,一般情况下我们运用js就可以直接在页面生产图片,
由于IE6、IE7 不支持base64编码图片显示,之后将介绍其他方法
当然不是必须要用这些JS库(jQuery 或prototype)才能完成这个功能,如果你不喜欢用这些JS库,也可以自己写的。
1.jQuery 的实现:

点击页面上生成图片按钮后会在页面的右侧生成一张图片,如图:



2.prototype 的实现:
把相应的JS和按钮的onclick 函数改写下就可以了

3.不要任何JS库
只要把相应的JS和按钮的onclick 函数改写下就可以了


另打开页面显示图片:在生成flash右击,选中Save Image locally 如下图



由于IE6、IE7不支持base64码,如果要在IE6、IE7中兼容,可以将图片的base64码post到服务器,然后利用服务端生成图片,再将文件流在返回给浏览器(类似图片下载的方法),具体如下:
<script type="text/javascript" src="swfobject.js"></script> 
</head>
<body>
<h2>页面直接生成flash</h2>
<div id="my_chart"></div>
</body>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart",
"400", "300", "9.0.0", "expressInstall.swf",
{"get-data":"getDemoData"});
function getDemoData(){
var barData={
"y_axis":{"max":26,"steps":2.5},
"title":{"text":"每周水果产量"},
"is_decimal_separator_comma":0,
"elements":[{"values":[
{"colour":"0x336699","tip":"16.0 吨 ","top":16},
{"colour":"0x336699","tip":"8.0 吨 ","top":8},
{"colour":"0x336699","tip":"18.0 吨 ","top":18},
{"colour":"0x336699","tip":"12.0 吨 ","top":12},
{"colour":"0x336699","tip":"16.0 吨 ","top":16},
{"colour":"0x336699","tip":"24.0 吨 ","top":24},
{"colour":"0x336699","tip":"6.0 吨 ","top":6}
],
"type":"bar_glass"}
],
"num_decimals":2,
"is_fixed_num_decimals_forced":0,
"x_axis":{"labels":{"labels":["星期1","星期2","星期3","星期4","星期5","星期6","星期日"]}},
"is_thousand_separator_disabled":0
};
return JSON.stringify(barData);
}

</script>
</html>

// 这个expressInstall.swf 是什么,有关系?
// QQ 24343126 8 楼 20067765 2012-01-05 我和7楼的兄弟情况一样,也是一直在loading data。。。。
不知道什么地方弄错了。。 9 楼 sjsky 2012-01-05 20067765 写道我和7楼的兄弟情况一样,也是一直在loading data。。。。
不知道什么地方弄错了。。
他的问题我已经帮他解决了 10 楼 zhyefeixin 2012-02-07 20067765 写道我和7楼的兄弟情况一样,也是一直在loading data。。。。
不知道什么地方弄错了。。
11 楼 sjsky 2012-02-09 zhyefeixin 写道20067765 写道我和7楼的兄弟情况一样,也是一直在loading data。。。。
不知道什么地方弄错了。。


你先告诉我你的运行环境? 12 楼 20067765 2012-02-15 sjsky 写道zhyefeixin 写道20067765 写道我和7楼的兄弟情况一样,也是一直在loading data。。。。
不知道什么地方弄错了。。


你先告诉我你的运行环境?
我已经解决了,呵呵。 13 楼 zhyefeixin 2012-03-15 谢谢,我也解决了 14 楼 xw007119 2012-09-04 我也一直在loading data。。。。
请问是如何解决 15 楼 sunney2012 2012-09-05 Uncaught TypeError: Object #<HTMLObjectElement> has no method 'get_version'

Chrome下报错 没有 get_version 和 get_img_binary 方法

楼主如何解决???? 16 楼 sjsky 2012-09-06 xw007119 写道我也一直在loading data。。。。
请问是如何解决
把项目部署到在web容器下运行试试 17 楼 sjsky 2012-09-06 sunney2012 写道Uncaught TypeError: Object #<HTMLObjectElement> has no method 'get_version'

Chrome下报错 没有 get_version 和 get_img_binary 方法

楼主如何解决????
你是在chrome 下运行的么?

读书人网 >Flash

热点推荐