使用open flash chart制作报表

http://sarin.iteye.com/blog/685354这篇文章对open flash chart与struts2的整合使用做了详细的介绍，但是按照文章里面的内容进行实际操作的时候，却报了open flash char io error Loading test data Error #2032 的错，经过分析，原因我忘记了引入jofc2其所依赖的xstream包......在这里，需要注意的是这两个JAR包版本号的问题，我使用的是jofc2-1.0-0.jar和xstream-1.3.1.jar。

项目按照Struts2的开发标准搭建，然后把OFC开发所需的flash文件，页面显示Flash的支持文件swfobject.js放到发布目录的相应位置，再将jofc2和其依赖的xstream的jar包放到WEB-INF/lib下并加入编译路径即可。

需求还是按照那篇博客文章中写的那样：记录系统访问用户所使用的浏览器并用图表显示。那么需要在数据库中记录这样的信息，如图所示：

1---- 首先是Action的定义，代码如下：

import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;

import jofc2.model.Chart;
import jofc2.model.axis.Label;
import jofc2.model.axis.XAxis;
import jofc2.model.axis.YAxis;
import jofc2.model.elements.BarChart;
import jofc2.model.elements.LineChart;

/**   
 * 
 * @Project gun
 * @Package action.chart
 * @Class TestAction
 */
public class TestAction extends ActionSupport{
	private Chart ofcChart;  
    public Chart getOfcChart() {  
        return ofcChart;  
    }  
    public String showChart() throws Exception{  
        //y轴数据集合-使用数量  
        List<Number> dataSet = new ArrayList<Number>();  
        for(int i=1; i<=12;i++) {
        	dataSet.add((Integer)i);
        }
        //x轴数据集合-浏览器类型  
        List<Label> xLabel = new ArrayList<Label>();  
        //获取需要显示的数据集  
        List browserList = new TestDAO().get();  
        for (int i = 0; i < browserList.size(); i++) {  
            Test map = (Test) browserList.get(i);  
            //填充x轴  
            dataSet.add((Integer) map.getStatCount());  
            //填充y轴  
            xLabel.add(new Label((String) map.getStatVar()));  
        }  
        //设置X轴内容  
        XAxis labels = new XAxis();  
        labels.addLabels(xLabel);  
        //设置Y轴显示值域:Range的三个参数含义为：坐标最小值，最大值和步进值  
        YAxis range = new YAxis();  
        range.setRange(0, 200, 10);  
        //OFC折线图设置  
//      LineChart lineChart = new LineChart(LineChart.Style.NORMAL);
        //柱状图
        BarChart lineChart=new BarChart(BarChart.Style.GLASS); 
        lineChart.addValues(dataSet);  
        lineChart.setColour("#6666FF");  
        lineChart.setText("使用者数量");  
        //图表设置  
        ofcChart = new Chart("用户浏览器使用量分布");  
        ofcChart.setXAxis(labels);  
        ofcChart.setYAxis(range);  
        ofcChart.addElements(lineChart);  
  
        return SUCCESS;  
    }  

}

2 DAO类，从数据库中获取数据，另外还定义了一个Bean类Test

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.gun.base.db.DBConnection;

/**
 * 从数据库中取得所需的数据
 * 
 * @Project gun
 * @Package action.chart
 * @Class TestDAO
 */
public class TestDAO {

	public List get() throws Exception {
		Connection conn = null;
		PreparedStatement stmt = null;
		ResultSet rs = null;

		String querySQL = "select statCount, statVar from test where statType='broeser'";
		List list = new ArrayList();
		try {
			conn = DBConnection.getConnection();
			stmt = conn.prepareStatement(querySQL);
			rs = stmt.executeQuery();
			System.out.println("OK");
			while (rs.next()) {
				Test test = new Test();
				test.setStatCount(rs.getInt("statCount"));
				test.setStatVar(rs.getString("statVar"));
				list.add(test);
			}
			return list;
		} catch (SQLException e) {
			throw new Exception("根据主键查询信息失败，错误信息：" + e.toString());
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (stmt != null)
					stmt.close();
				if (conn != null)
					DBConnection.releaseConnection(conn);
			} catch (SQLException e) {
				throw new Exception("关闭数据库失败，错误信息：" + e.toString());
			}
		}
	}
}

/**
 * 请在此处填写类的描述
 * 
 * @Project gun
 * @Package action.chart
 * @Class Test
 */
public class Test {
	private String statVar;

	private int statCount;

	public String getStatVar() {
		return statVar;
	}

	public void setStatVar(String statVar) {
		this.statVar = statVar;
	}

	public int getStatCount() {
		return statCount;
	}

	public void setStatCount(int statCount) {
		this.statCount = statCount;
	}

}

3 最后定义了TestResult类，继承于StrutsResultSupport，用于生成json格式的数据。

import jofc2.model.Chart;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.dispatcher.StrutsResultSupport;

import com.opensymphony.xwork2.ActionInvocation;

public class TestResult extends StrutsResultSupport {
	private static final String ENCODING = "GBK";

	private static final long serialVersionUID = 4702848904993212381L;

	@Override
	protected void doExecute(String arg0, ActionInvocation inv)
			throws Exception {
		Chart chart = (Chart) inv.getStack().findValue("ofcChart");
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("application/json-rpc;charset=" + ENCODING);
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Expires", "0");
		response.setHeader("Pragma", "No-cache");
		String json = chart.toString();
		System.out.println(json.toString());
		response.setContentLength(json.getBytes(ENCODING).length);
		PrintWriter out = response.getWriter();
		out.print(json);
		out.flush();
		out.close();
	}
}

4 现在需要在struts.xml配置文件中配置Action，如下：

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>

	<package name="gun" extends="json-default">

		<result-types>
			<result-type name="ofc" class="action.chart.TestResult" />
		</result-types>

		<action name="test" class="action.chart.TestAction" method="showChart">
			<result type="ofc" name="success">
			</result>
		</action>

	</package>
</struts>

5 JSP页面很简单，只需要写一些简单的JS代码即可：

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'cbar.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="openflashchart/js/swfobject.js"></script>
<script type="text/javascript">  
    var flashvars = {"data-file":"test.action"};  
    var params = {menu: "false",scale: "noScale",wmode:"opaque"};  
    swfobject.embedSWF("openflashchart/open-flash-chart.swf", "my_chart", "900", "500", "9.0.0",  
    "expressInstall.swf",flashvars,params);  
</script>
</head>

<body>
	<table align="center">
		<tr>
			<td><div id="my_chart"></div></td>
		</tr>
	</table>
</body>
</html>

最后运行程序，结果如下：