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

   最后运行程序,结果如下:

082449_ydo0_242436.jpg