Open Flash Chart2应用(实现flash另存为图片)

Open Flash Chart2 与1.x版本最大不同之处在于可以把数据格式改成JSON,可以很方便的运用Ajax实现动态加载数据,同时可以把生成的flash保存成图片(这个功能很实用)

下面图文并茂一步一步详细介绍Open Flash Chart2的应用。

一、官网及相关下载的网站

本文附件将提供了一份已经整理好的demo源码下载:ofc2 demo源码

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

效果如下图:

三、页面Ajax动态读取数据生成flash
java类中用到了jofc2-1.0-0.jar这个lib(包含于附件中

 

效果图如下:


四、通过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到服务器,然后利用服务端生成图片,再将文件流在返回给浏览器(类似图片下载的方法),具体如下:

原创文章,转载请注明: 转载自micmiu – 软件开发+生活点滴[ http://www.micmiu.com/ ]

本文链接地址: http://www.micmiu.com/opensource/ofc/ofc2-demo/

发表评论?

2 条评论。

  1. 楼主 你好 我复制您的代码
    也一直在loading data。。。。
    请问这是什么原因?如何解决啊?

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">