使用open flash chart制作报表
jopen
13年前
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>最后运行程序,结果如下: