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

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。

<html>
<head>
<script type="text/javascript" src="ofc2/json2.js"></script>
<script type="text/javascript" src="ofc2/swfobject.js"></script>
</head>
<body>
<h2>页面直接生成flash</h2>
<div id="my_chart"></div>
</body>
<script type="text/javascript">
swfobject.embedSWF("ofc2/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>

效果如下图：

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

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<link href="common/common.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="ofc2/swfobject.js"></script>
</head>
<body>
<table width="100%">
	<tr>
		<td>
		<h2>Ajax动态读取数据生成flash</h2>
		</td>
	</tr>
	<tr>
		<td>
		<div id="ofc2_bar01"></div>
		</td>
	</tr>
</table>

</body>
<script type="text/javascript">
swfobject.embedSWF(
	"ofc2/open-flash-chart.swf", 
	"ofc2_bar01", 
	"400", 
	"300", 
	"9.0.0",
	"expressInstall.swf",
	{"data-file":"DrawOfc2ChartMainAction.do?method=getDrawBarData"},
	{wmode:"transparent"}
);
</script>
</html>

/**
 * Open flash chart 2
 * @author Michael sun
 */
public class DrawOfc2ChartMainAction extends DispatchAction {
    /**
     * draw chart
     * @param mapping struts mapping
     * @param form struts form
     * @param request http request
     * @param response http response
     * @return action forward
     * @throws Exception any execption
     */
    public ActionForward getDrawBarData(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {

        response.setContentType("application/json");
        response.setHeader("Cache-Control", "no-cache");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();

        Map<String, Double> dataMap = new LinkedHashMap<String, Double>();
        dataMap.put("1", 16d);
        dataMap.put("2", 8d);
        dataMap.put("3", 18d);
        dataMap.put("4", 12d);
        dataMap.put("5", 16d);
        dataMap.put("6", 24d);
        dataMap.put("日", 6d);

        Chart ofc2Chart = new Chart();
        Text title = new Text("每周水果产量");
        ofc2Chart.setTitle(title);

        BarChart barChart = new BarChart(BarChart.Style.GLASS); // 设置条状图样式

        double ymax = 25d; // //Y 轴最大值
        XAxis x = new XAxis(); // X 轴
        for (Entry<String, Double> entry : dataMap.entrySet()) {
            x.addLabels("星期" + entry.getKey()); // x 轴的文字
            Bar bar = new Bar(entry.getValue(), " 吨 ");
            bar.setColour("0x336699"); // 颜色
            bar.setTooltip(entry.getValue() + " 吨 "); // 鼠标移动上去后的提示
            barChart.addBars(bar); // 条标题，显示在 x 轴上

        }
        ofc2Chart.addElements(barChart);
        ofc2Chart.setXAxis(x);

        YAxis y = new YAxis(); // y 轴
        y.setMax(ymax + 1.0); // y 轴最大值
        y.setSteps(ymax / 10); // y 轴步进
        ofc2Chart.setYAxis(y);

        String jsonChart = ofc2Chart.toString();
        out.write(jsonChart);
        out.close();
        return null;
    }

}

效果图如下：

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

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<link href="common/common.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="common/jquery-1.3.2.js"></script>
<script type="text/javascript" src="ofc2/swfobject.js"></script>
</head>
<body>
<table width="900">
	<tr>
		<td>
		<p>这是flash</p>
		<div id="ofc2_bar01"></div>
		</td>
		<td>
		<p>这是图片</p>
		<div id="img_chart_1"></div>
		</td>
	</tr>
	<tr>
		<td colspan="2"><input type="button" name="btncopy"
			onclick="OFC.jquery.rasterize('ofc2_bar01', 'img_chart_1')"
			value="生成图片"></td>
	</tr>
</table>

</body>
<script type="text/javascript">
swfobject.embedSWF(
	"ofc2/open-flash-chart.swf", 
	"ofc2_bar01", 
	"300", 
	"300", 
	"10.0.0",
	"expressInstall.swf",
	{"data-file":"DrawOfc2ChartMainAction.do?method=getDrawBarData"},
	{wmode:"transparent"}
);
</script>
<script type="text/javascript">
 
OFC = {};
 
OFC.jquery = {
    name: "jQuery",
    version: function(src) { return $('#'+ src)[0].get_version() },
    rasterize: function (src, dst) { $('#'+ dst).replaceWith(OFC.jquery.image(src)) },
    image: function(src) { return "<img src='data:image/png;base64," + $('#'+src)[0].get_img_binary() + "' />"},
    popup: function(src) {
        var img_win = window.open('', 'Image')
        with(img_win.document) {
            write('<html><head><title>Charts: Export as Image</title></head><body>' + OFC.jquery.image(src) + '</body></html>') }
		// stop the 'loading...' message
		img_win.document.close();
     }
}
 
// Using an object as namespaces is JS Best Practice. I like the Control.XXX style.
//if (!Control) {var Control = {}}
//if (typeof(Control == "undefined")) {var Control = {}}
if (typeof(Control == "undefined")) {var Control = {OFC: OFC.jquery}}
 
// By default, right-clicking on OFC and choosing "save image locally" calls this function.
// You are free to change the code in OFC and call my wrapper (Control.OFC.your_favorite_save_method)
// function save_image() { alert(1); Control.OFC.popup('my_chart') }
function save_image() { alert(1); OFC.jquery.popup('ofc2_bar01') }
function moo() { alert(99); };
</script>
</html>

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

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

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

<script type="text/javascript">
OFC = {}
OFC.prototype = {
    name: "Prototype",
    version: function(src) { return $(src).get_version() },
    rasterize: function (src, dst) { $(dst).replace(new Element("img", {src: Control.OFC.image(src)})) },
    image: function(src) {return "data:image/png;base64," + $(src).get_img_binary()},
    popup: function(src) {
        var img_win = window.open('', 'Image')
        with(img_win.document) {
            write("<html><head><title>Charts: Export as Image</title></head><body><img src='" + Control.OFC.image(src) + "' /></body></html>") }
     }
}
// Using an object as namespaces is JS Best Practice. I like the Control.XXX style.
if (typeof(Control == "undefined")) {var Control = {OFC: OFC.prototype}}
//if (!Control) {var Control = {}}
// By default, right-clicking on OFC and choosing "save image locally" calls this function.
// You are free to change the code in OFC and call my wrapper (Control.OFC.your_favorite_save_method)
function save_image() { Control.OFC.popup('ofc2_bar01') }
</script>

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

<script type="text/javascript">
OFC = {}
OFC.none = {
    name: "pure DOM",
    version: function(src) { return document.getElementById(src).get_version() },
    rasterize: function (src, dst) {
      var _dst = document.getElementById(dst)
      e = document.createElement("div")
      e.innerHTML = Control.OFC.image(src)
      _dst.parentNode.replaceChild(e, _dst);
    },
    image: function(src) {return "<img src='data:image/png;base64," + document.getElementById(src).get_img_binary() + "' />"},
    popup: function(src) {
        var img_win = window.open('', 'Image')
        with(img_win.document) {
            write("<html><head><title>Charts: Export as Image</title></head><body>" + Control.OFC.image(src) + "</body></html>") }
     }
}
if (typeof(Control == "undefined")) {var Control = {OFC: OFC.none}}
function save_image() { Control.OFC.popup('ofc2_bar01') }

</script>

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

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

由于IE6、IE7不支持base64码，如果要在IE6、IE7中兼容，可以将图片的base64码post到服务器，然后利用服务端生成图片，再将文件流在返回给浏览器(类似图片下载的方法)，具体如下：

 /**
     * upload img
     * @param mapping struts mapping
     * @param form struts form
     * @param request http request
     * @param response http response
     * @return action forward
     * @throws Exception any execption
     */
    public ActionForward exportImg(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        String imgBase64Code = request.getParameter("imgBase64Code");

        response.setContentType("image/PNG;charset=UTF-8");
        response.setHeader("Content-disposition", "attachment; filename="
                + new String("flashExport.png".getBytes(), "iso-8859-1"));
        this.createImg(response.getOutputStream(), imgBase64Code);
        return null;
    }

    /**
     * 
     * @param os
     * @param base64Code
     */
    private void createImg(OutputStream os, String base64Code) {
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            byte[] b = decoder.decodeBuffer(base64Code);
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {
                    b[i] += 256;
                }
            }

            os.write(b);

        } catch (Exception e) {
            logger.error(" create img error:", e);
        }
    }

1 楼 magic_yao 2010-08-09

能给python环境下的应用实例吗？

2 楼 sjsky 2010-08-09

magic_yao 写道

能给python环境下的应用实例吗？

不好意思啊，python环境下真没有研究过，没办法给你实例，
不过官网提供了对python的支持的library，可以看一下的：
http://teethgrinder.co.uk/open-flash-chart-2/tutorial-other-libraries.php#python

3 楼 handonghandong 2010-08-10

String imgBase64Code = request.getParameter("imgBase64Code");
imgBase64Code如何定义的？谢谢

4 楼 sjsky 2010-08-10

handonghandong 写道

String imgBase64Code = request.getParameter("imgBase64Code");
imgBase64Code如何定义的？谢谢

注意上面的JavaScript里的get_img_binary()，这个方法可以生成imgBase64Code

5 楼 CSDODO 2010-08-26

楼主V5，请教几个问题：

<%@ include file="/common/taglibs.jsp"%>

这个文件的引用出自何处？

另外post到服务器再返回的那段代码，是怎么调用的？

6 楼 sjsky 2010-08-29

CSDODO 写道

<%@ include file="/common/taglibs.jsp"%>

这个是引入jstl标签库的，可以去掉的。我修改了。

CSDODO 写道

另外post到服务器再返回的那段代码，是怎么调用的？

上面有具体的实现代码，可以实现了浏览器类似文件另存的功能。

7 楼 www861168com 2011-10-24

你好，看了你的这篇文章，也下载了你的附件。
http://sjsky.iteye.com/blog/650043

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

copy你的代码，把js的引用目录也改了。可就是出不来，一直显示'loading data...'。
代码如下：
<html>
<head>
<script type="text/javascript" src="json2.js"></script>
<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