A Simple Open Flash Chart2 in Java Web

来源：互联网发布：网络上鹅是什么意思编辑：程序博客网时间：2024/05/18 23:55

Open Flash Chart是一款很好的Flash报表工具，轻量、灵活、易于使用并可以在各种语言中，如PHP、JAVA、DoNet、Ruby、Python等。
项目结构：
src -> chart
-- OFC2Axis.java
-- OFC2Builder.java
-- OFC2Chart.java
-- OFC2Element.java
-- OFC2Legend.java
-- OFC2Title.java
src -> filters
-- EncodingFilter.java
src -> servlets
-- ChartServlet.java
WebContent
-- index.jsp
-- open-flash-chart.swf
WebContent -> js
-- swfobject.js
WebContent -> WEB-INF
-- web.xml

效果图：

开发环境：
JDK1.6 tomcat6.0 工具STS 2.5.1
前提准备：
需要下载使用open-flash-chart.swf文件

代码：
index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Open Flash Chart2 - Sample by abrahu</title><script type="text/javascript" src="js/swfobject.js"></script><script type="text/javascript">//element type:bar, line, pieswfobject.embedSWF(  "open-flash-chart.swf", "my_chart", "650", "300",  "9.0.0", "expressInstall.swf",  {"data-file":"ChartServlet"}  );</script></head><body><div id="my_chart"></div></body></html>

OFC2Title.java

package chart;public class OFC2Title{private String text;private String style;public String getText(){return this.text;}public void setText(String text){this.text = text;}public String getStyle(){return this.style;}public void setStyle(String style){this.style = style;}}

OFC2Legend.java

package chart;public class OFC2Legend{private String text;private String style;public String getText(){return this.text;}public void setText(String text){this.text = text;}public String getStyle(){return this.style;}public void setStyle(String style){this.style = style;}}

OFC2Element.java

package chart;public class OFC2Element{private String attributes;private String text;private String values;public String getAttributes() {return attributes;}public void setAttributes(String attributes) {this.attributes = attributes;}public String getText() {return text;}public void setText(String text) {this.text = text;}public String getValues() {return values;}public void setValues(String values) {this.values = values;}}

OFC2Axis.java

package chart;public class OFC2Axis{private String attributes;private String lables;public String getAttributes() {return attributes;}public void setAttributes(String attributes) {this.attributes = attributes;}public String getLables() {return lables;}public void setLables(String lables) {this.lables = lables;}}

OFC2Chart.java

package chart;import java.util.List;public class OFC2Chart{private OFC2Title title;private OFC2Legend x_legend;private OFC2Legend y_legend;private OFC2Axis x_axis;private OFC2Axis y_axis;private List<OFC2Element> elements;public OFC2Title getTitle() {return title;}public void setTitle(OFC2Title title) {this.title = title;}public OFC2Legend getX_legend() {return x_legend;}public void setX_legend(OFC2Legend x_legend) {this.x_legend = x_legend;}public OFC2Legend getY_legend() {return y_legend;}public void setY_legend(OFC2Legend y_legend) {this.y_legend = y_legend;}public OFC2Axis getX_axis() {return x_axis;}public void setX_axis(OFC2Axis x_axis) {this.x_axis = x_axis;}public OFC2Axis getY_axis() {return y_axis;}public void setY_axis(OFC2Axis y_axis) {this.y_axis = y_axis;}public List<OFC2Element> getElements() {return elements;}public void setElements(List<OFC2Element> elements) {this.elements = elements;}}

OFC2Builder.java

package chart;// Author: abrahupublic class OFC2Builder {private StringBuilder sb;public String createChart(OFC2Chart chart) {sb = new StringBuilder();// create {sb.append("{");// create titleOFC2Title title = chart.getTitle();if (title != null) {setTextandStyle("title", title.getText(), title.getStyle(),TITLE_TEST, TITLE_STYLE);}// create x_legendOFC2Legend lx = chart.getX_legend();if (lx != null) {setTextandStyle("x_legend", lx.getText(), lx.getStyle(),LEGEND_TEXT, LEGEND_STYLE);}// create y_legendOFC2Legend ly = chart.getY_legend();if (ly != null) {setTextandStyle("y_legend", ly.getText(), ly.getStyle(),LEGEND_TEXT, LEGEND_STYLE);}// create elementssb.append("\"elements\":[");for (OFC2Element e : chart.getElements()) {sb.append("{");if (e.getAttributes() != null) {sb.append(e.getAttributes());} else {sb.append(ELEMENT_ATTR);}if (e.getText() != null) {sb.append(",\"text\":\"" + e.getText() + "\"");} else {System.out.println("OFC2's element's text is empty!");}if (e.getValues() != null) {sb.append(",\"values\":[" + e.getValues() + "]");} else {System.out.println("OFC2's element's value is empty!");}sb.append("},");}if (sb.charAt(sb.length() - 1) == ',')sb.deleteCharAt(sb.length() - 1);sb.append("],");// create x_axisOFC2Axis xa = chart.getX_axis();if (xa == null) {xa = new OFC2Axis();}sb.append("\"x_axis\":{");if (xa.getAttributes() != null) {sb.append(xa.getAttributes());} else {sb.append(XAXIS_ATTR);}if (xa.getLables() != null) {sb.append(",\"labels\":{\"labels\":[" + xa.getLables() + "]}");}sb.append("},");// create y_axisOFC2Axis ya = chart.getY_axis();if (ya != null) {sb.append("\"y_axis\":{");if (ya.getAttributes() != null) {sb.append(ya.getAttributes());} else {sb.append(YAXIS_ATTR);}sb.append("}");}// create }if (sb.charAt(sb.length() - 1) == ',')sb.deleteCharAt(sb.length() - 1);sb.append("}");return sb.toString();}public final String TITLE_TEST = "Title";public final String TITLE_STYLE = "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}";public final String LEGEND_TEXT = "Legend";public final String LEGEND_STYLE = "{color: #736AFF; font-size: 12px;}";public final String ELEMENT_ATTR = "\"type\":\"line\", \"alpha\":0.5, \"colour\":\"#9933CC\", \"font-size\": 10";public final String XAXIS_ATTR = "\"stroke\":1, \"tick_height\":10, \"colour\":\"#d000d0\", \"grid_colour\":\"#00ff00\"";public final String YAXIS_ATTR = "\"stroke\":4, \"tick_length\": 3, \"colour\":\"#d000d0\", \"grid_colour\": \"#00ff00\", \"offset\":0, \"max\":20";private void setTextandStyle(String unitName, String text, String style,String defaulTest, String defaultStyle) {sb.append("\"" + unitName + "\":{");if (text != null) {sb.append("\"text\":\"" + text + "\",");} else {sb.append("\"text\":\"" + defaulTest + "\",");}if (style != null) {sb.append("\"style\":\"" + style + "\"");} else {sb.append("\"style\":\"" + defaultStyle + "\"");}sb.append("},");}}

ChartServlet.java

package servlets;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import chart.OFC2Axis;import chart.OFC2Builder;import chart.OFC2Chart;import chart.OFC2Element;import chart.OFC2Legend;import chart.OFC2Title;public class ChartServlet extends HttpServlet {/** *  */private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{OFC2Builder chartBuilder = new OFC2Builder();OFC2Chart chart = new OFC2Chart();OFC2Title title = new OFC2Title();OFC2Legend y_legend = new OFC2Legend();OFC2Element e1 = new OFC2Element();OFC2Element e2 = new OFC2Element();OFC2Axis x_axis = new OFC2Axis();List<OFC2Element> elementList = new ArrayList<OFC2Element>();elementList.add(e1);elementList.add(e2);title.setText("测试Testing Chart");y_legend.setText("open flash chart");e1.setText("Element1");e1.setValues("9,6,7,9,5,7,6,9,7");e2.setAttributes("\"type\":\"bar\", \"alpha\":0.5, \"colour\":\"#CC9933\", \"font-size\": 10");e2.setText("Element2");e2.setValues("6,7,9,5,7,6,9,7,3");x_axis.setLables("\"1月\",\"2月\",\"3月\",\"4月\",\"5月\",\"6月\",\"7月\",\"8月\",\"9月\"");chart.setTitle(title);chart.setY_legend(y_legend);chart.setElements(elementList);chart.setX_axis(x_axis);String strChart = chartBuilder.createChart(chart);PrintWriter out = resp.getWriter();out.write(strChart);}}

web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">  <display-name>OFC2_Test</display-name>  <filter>  <filter-name>EncodingFilter</filter-name>  <filter-class>filters.EncodingFilter</filter-class>    <init-param>    <param-name>encoding</param-name>    <param-value>utf-8</param-value>   </init-param>  </filter>  <filter-mapping>  <filter-name>EncodingFilter</filter-name>  <url-pattern>/*</url-pattern>  </filter-mapping>  <servlet>  <servlet-name>ChartServlet</servlet-name>  <servlet-class>servlets.ChartServlet</servlet-class>  </servlet>  <servlet-mapping>  <servlet-name>ChartServlet</servlet-name>  <url-pattern>/ChartServlet</url-pattern>  </servlet-mapping>  <welcome-file-list>    <welcome-file>index.html</welcome-file>    <welcome-file>index.htm</welcome-file>    <welcome-file>index.jsp</welcome-file>    <welcome-file>default.html</welcome-file>    <welcome-file>default.htm</welcome-file>    <welcome-file>default.jsp</welcome-file>  </welcome-file-list></web-app>

EncodingFilter.java
参见：http://blog.csdn.net/abrahu/article/details/7426070
swfobject.js
参见下载得到的代码文件

一个Open Flash Chart的参考数据文件：
{
"title":{
"text": "Many data lines",
"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
},

"y_legend":{
"text": "Open Flash Chart",
"style": "{color: #736AFF; font-size: 12px;}"
},

"elements":[
{
"type": "bar",
"alpha": 0.5,
"colour": "#9933CC",
"text": "Page views",
"font-size": 10,
"values" : [9,6,7,9,5,7,6,9,7]
},
{
"type": "bar",
"alpha": 0.5,
"colour": "#CC9933",
"text": "Page views 2",
"font-size": 10,
"values" : [6,7,9,5,7,6,9,7,3]
}
],

"x_axis":{
"stroke":1,
"tick_height":10,
"colour":"#d000d0",
"grid_colour":"#00ff00",
"labels": {
"labels": ["January","February","March","April","May","June","July","August","Spetember"]
}
},

"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#d000d0",
"grid_colour": "#00ff00",
"offset": 0,
"max": 20
}
}

参考网址：
Open Flash Chart2官网：
http://teethgrinder.co.uk/open-flash-chart-2/
Open Flash Chart2源码及示例下载：
http://teethgrinder.co.uk/open-flash-chart-2/downloads.php
或直接下载：
http://downloads.sourceforge.net/project/openflashchart/open-flash-chart/Version%202%20Lug%20Wyrm%20Charmer/open-flash-chart-2-Lug-Wyrm-Charmer.zip?r=http%3A%2F%2Fsourceforge.net%2Fprojects%2Fopenflashchart%2Ffiles%2Flatest%2Fdownload%3Fsource%3Dfiles&ts=1333870931&use_mirror=nchc