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, pie
swfobject.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: abrahu
public class OFC2Builder {
private StringBuilder sb;
public String createChart(OFC2Chart chart) {
sb = new StringBuilder();
// create {
sb.append("{");
// create title
OFC2Title title = chart.getTitle();
if (title != null) {
setTextandStyle("title", title.getText(), title.getStyle(),
TITLE_TEST, TITLE_STYLE);
}
// create x_legend
OFC2Legend lx = chart.getX_legend();
if (lx != null) {
setTextandStyle("x_legend", lx.getText(), lx.getStyle(),
LEGEND_TEXT, LEGEND_STYLE);
}
// create y_legend
OFC2Legend ly = chart.getY_legend();
if (ly != null) {
setTextandStyle("y_legend", ly.getText(), ly.getStyle(),
LEGEND_TEXT, LEGEND_STYLE);
}
// create elements
sb.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_axis
OFC2Axis 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_axis
OFC2Axis 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