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

[color=red]blog迁移至[/color]:[url=http://www.micmiu.com]http://www.micmiu.com[/url]

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

[color=red]二、[/color][color=blue]HTML页面用JSON数据直接生成flash。[/color]

<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>

效果如下图:

[img]http://dl.iteye.com/upload/attachment/238083/3bf6e9e4-b852-35db-b7a0-ba93273c246f.jpg[/img]

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

<%@ 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;
}

}

效果图如下:

[img]http://dl.iteye.com/upload/attachment/238085/39a37a72-db6f-32ab-b7dd-308aa487891b.jpg[/img]

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

<%@ 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>

[color=blue]点击页面上生成图片按钮后会在页面的右侧生成一张图片[/color],如图:

[img]http://dl.iteye.com/upload/attachment/238118/935043b8-fc6b-3703-848b-2028d444e543.jpg[/img]

[color=blue]2.prototype 的实现[/color]:
把相应的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>

[color=blue]3.不要任何JS库[/color]
只要把相应的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 如下图

[img]http://dl.iteye.com/upload/attachment/243091/1d8feb81-8bab-38a5-89d5-a118b20ea347.jpg[/img]

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

/**
* 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);
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值