Struts2整合之动态图表OpenFlashChart

一日一博

浏览: 230400 次
性别:
来自: 武汉

最近访客更多访客>>

zhangthe9

存储炒菜错

zhaohuaxishiwzw

pywang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Struts2

struts2 OpenFlashChart jofc2

Java开源项目中制作图表比较出色的就是JFreeChart了，相信大家都听说过，它不仅可以做出非常漂亮的柱状图，饼状图，折线图基本图形之外，还能制作甘特图，仪表盘等图表。在Web应用中可以为项目增色不少。JFreeChart技术成熟，完全是通过Java代码控制图表生成，掌握难度不大。但是它的一个缺点就是所有资源在服务器端生成，需要占用大量的服务器资源，而且图表以流的形式输送到客户端也占用了大量的网络资源。
    对于服务器资源和网络资源吃紧的项目还不得不想办法，虽然JFreeChart非常的华丽，但是还好有Open Flash Chart，制作简单的柱状图，饼状图和折线图足够用，而且Flash的展示效果绝不比JFreeChart的差。项目地址是：http://teethgrinder.co.uk/open-flash-chart/
    先说说Open Flash Chart的工作原理，不要看到Flash就害怕，OFC的开发包内就是一个flash文件，其实我们不需要改动原有的Flash，只需给Flash提供符合规范的数据即可。OFC所需的数据格式就是JSON，JSON不依赖于任何技术（Java，.NET和PHP都有生成JSON代码的工具），这就使得OFC更加Open。本文从Java角度出发，使用Struts2框架，来分析OFC的使用。
    GoogleCode社区的一款开源插件为Java开发者使用OFC提供了JSON生成的专用工具，那就是jofc2，我可以使用jofc2采用类似JFreeChart的方式来组织代码，大大提升开发效率。该项目的地址是：http://jofc2.googlecode.com

首先把OFC的java支持包导入到struts2的工程里面，我这里用的是最新的jofc2-1.0-0.jar，然后把OFC需要的Flash文件expressInstall.swf和open-flash-chart.swf还有一个js文件swfobject.js导入到你的项目里，那么一个Struts2整合OFC项目已经部署好了，接下来是配置，是不是很方便很简洁呢？

这是显示Flash图表的显示页面，这里我只例举了三种风格的图表：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>open-flash-chart</title>
<script type="text/javascript" src="flashchart/swfobject.js"></script>
<script type="text/javascript">

var barChartData = {"data-file":"flashchart/barChart.action"}; 
var lineChartData = {"data-file":"flashchart/lineChart.action"};
var pieChartData = {"data-file":"flashchart/pieChart.action"};

var params = {menu: "false",scale: "noScale",wmode:"opaque"}; 

swfobject.embedSWF(
		"flashchart/open-flash-chart.swf", 	//open-flash-chart图标显示组件
		"barChart_div", 					//将图表显示到指定的DIV中
		"600", 								//图表宽度
		"400", 								//图表高度
		"9.0.0",    						//指定flash播放器版本
		"flashchart/expressInstall.swf",    //flashplayer检查提示安装程序
		barChartData,						//从服务器端装载JSON格式的图表数据
		params
);

swfobject.embedSWF(
		"flashchart/open-flash-chart.swf", 	//open-flash-chart图标显示组件
		"lineChart_div", 					//将图表显示到指定的DIV中
		"600", 								//图表宽度
		"400", 								//图表高度
		"9.0.0",    						//指定flash播放器版本
		"flashchart/expressInstall.swf",    //flashplayer检查提示安装程序
		lineChartData,						//从服务器端装载JSON格式的图表数据
		params
);

swfobject.embedSWF(
		"flashchart/open-flash-chart.swf", 	//open-flash-chart图标显示组件
		"pieChart_div", 					//将图表显示到指定的DIV中
		"600", 								//图表宽度
		"400", 								//图表高度
		"9.0.0",    						//指定flash播放器版本
		"flashchart/expressInstall.swf",    //flashplayer检查提示安装程序
		pieChartData,						//从服务器端装载JSON格式的图表数据
		params
);

</script>
</head>
<center>
<body>
	<h1>柱状图玻璃效果图表</h1>
	<div id="barChart_div"></div>
	
	<h1>折线图表</h1>
	<div id="lineChart_div"></div>
	
	<h1>折线图表</h1>
	<div id="pieChart_div"></div>
</body>
</center>
</html>

这是专门为OFC配置的result的type，会在后面的struts.xml里面用到。

public class OfcResultType extends StrutsResultSupport{

	private static final long serialVersionUID = -904262813914309932L;
	
	private static final String OFC_ENCODING = "UTF-8";

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

}

只需要这样在struts.xml里面配置result就行了

<constant name="struts.devMode" value="true" />
	
	<package name="ofc" extends="struts-default">
        <result-types>
            <result-type name="ofcChart" class="com.chou.ofc.OfcResultType"/>
        </result-types>
    </package>
	
	
	<package name="flashchart" namespace="/flashchart" extends="ofc">
		<action name="*" class="com.chou.web.FlashChartAction" method="{1}">
			<result type="ofcChart"/>
		</action>
	</package>

接下来是在Action后台利用jofc类库来组织json数据利用response返回给页面从而生成漂亮的图表

public class FlashChartAction extends ActionSupport {

	private static final long serialVersionUID = -51015983910941007L;

	private Chart ofcChart;

	public Chart getOfcChart() {
		return ofcChart;
	}

	public String barChart() throws Exception {
		// y轴数据集合-使用次数
		List<Number> ySet = new ArrayList<Number>();

		// x轴数据集合-浏览器类型
		List<String> xLabel = new ArrayList<String>();

		// 填充y轴
		for (int i = 0; i < 7; i++) {
			ySet.add(i * 100);
		}
		// 填充x轴
		xLabel.add("360Safe");
		xLabel.add("Safari");
		xLabel.add("IE6");
		xLabel.add("Opera");
		xLabel.add("Firefox");
		xLabel.add("IE9");
		xLabel.add("Chrome");

		// 设置X轴内容
		XAxis labels = new XAxis();
		labels.setLabels(xLabel);
		// 设置Y轴显示值域:Range的三个参数含义为：坐标最小值，最大值和步进值
		YAxis range = new YAxis();
		range.setRange(0, 1000, 100);
		
		//玻璃效果柱状图
		//BarChart chart=new BarChart(BarChart.Style.GLASS);
		//Sketch效果柱状图设置  
		SketchBarChart chart = new SketchBarChart();
		chart.addValues(ySet);
		chart.setColour("#6666FF");//折线的颜色
		chart.setText("使用者数量");
		
		// 图表设置
		ofcChart = new Chart("用户浏览器使用量分布");
		ofcChart.setXAxis(labels);
		ofcChart.setYAxis(range);
		ofcChart.addElements(chart);

		return SUCCESS;
	}
	
	public String lineChart() throws Exception {
		// y轴数据集合-使用次数
		List<Number> ySet = new ArrayList<Number>();

		// x轴数据集合-浏览器类型
		List<String> xLabel = new ArrayList<String>();

		// 填充y轴
		for (int i = 0; i < 7; i++) {
			ySet.add(i * 100);
		}
		// 填充x轴
		xLabel.add("360Safe");
		xLabel.add("Safari");
		xLabel.add("IE6");
		xLabel.add("Opera");
		xLabel.add("Firefox");
		xLabel.add("IE9");
		xLabel.add("Chrome");

		// 设置X轴内容
		XAxis labels = new XAxis();
		labels.setLabels(xLabel);
		// 设置Y轴显示值域:Range的三个参数含义为：坐标最小值，最大值和步进值
		YAxis range = new YAxis();
		range.setRange(0, 1000, 100);

		//折线图设置
		LineChart chart = new LineChart(LineChart.Style.NORMAL);  
		chart.addValues(ySet);
		chart.setColour("#6666FF");//柱子的颜色
		chart.setWidth(3);//折线宽度
		chart.setText("使用者数量");
		
		// 图表设置
		ofcChart = new Chart("用户浏览器使用量分布");
		ofcChart.setXAxis(labels);
		ofcChart.setYAxis(range);
		ofcChart.addElements(chart);

		return SUCCESS;
	}

	public String pieChart() throws Exception {
		// y轴数据集合-使用次数
		List<Number> ySet = new ArrayList<Number>();

		// x轴数据集合-浏览器类型
		List<String> xLabel = new ArrayList<String>();

		// 填充y轴
		for (int i = 0; i < 7; i++) {
			ySet.add(i * 100);
		}
		// 填充x轴
		xLabel.add("360Safe");
		xLabel.add("Safari");
		xLabel.add("IE6");
		xLabel.add("Opera");
		xLabel.add("Firefox");
		xLabel.add("IE9");
		xLabel.add("Chrome");

		// 设置X轴内容
		XAxis labels = new XAxis();
		labels.setLabels(xLabel);
		// 饼状图添加块:Range的三个参数含义为：最小值，最大值和步进值
		YAxis range = new YAxis();
		range.setRange(0, 1000, 100);

		//饼状图设置
		PieChart chart = new PieChart();
		chart.addValues(ySet);
		chart.setColours("#d01f3c", "#356aa0", "#C79810","#6666FF");
		chart.setRadius(180); //饼图的半径
		chart.setText("使用者数量");
		chart.setTooltip("#val# / #total#<br>#percent#");
		
		// 图表设置
		ofcChart = new Chart("用户浏览器使用量分布");
		ofcChart.setXAxis(labels);
		ofcChart.setYAxis(range);
		ofcChart.addElements(chart);

		return SUCCESS;
	}
}

下面是生成的图表截图：