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/
二、 HTML页面用JSON数据直接生成flash。
页面直接生成flash
效果如下图：
三、 页面Ajax动态读取数据生成flash。
java类中用到了 jofc2-1.0-0.jar这个类
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
Ajax动态读取数据生成flash |
/**
* 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 dataMap = new LinkedHashMap();
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 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"%>
|
这是flash |
这是图片 |
点击页面上生成图片按钮后会在页面的右侧生成一张图片，如图：
2.prototype 的实现：
把相应的JS和按钮的onclick 函数改写下就可以了
3.不要任何JS库
只要把相应的JS和按钮的onclick 函数改写下就可以了
另打开页面显示图片：在生成flash右击，选中Save Image locally 如下图
由于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);
}
}
- Open_flash_chart_2.zip (745.3 KB)
- 下载次数: 1101
- 查看图片附件