Struts2整合之动态图表OpenFlashChart

最新推荐文章于 2018-01-12 15:15:26 发布

Easyean

最新推荐文章于 2018-01-12 15:15:26 发布

阅读量299

点赞数

分类专栏： Struts2 文章标签： struts2 OpenFlashChart jofc2

本文链接：https://blog.csdn.net/sinat_33243470/article/details/84245254

版权

Struts2 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

[size=medium]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 [/size]

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

[size=medium]这是显示Flash图表的显示页面，这里我只例举了三种风格的图表：[/size]


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

[size=medium]这是专门为OFC配置的result的type，会在后面的struts.xml里面用到。[/size]


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();
	}

}

[size=medium]只需要这样在struts.xml里面配置result就行了[/size]


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

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


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;
	}
}

[size=medium]
下面是生成的图表截图：
[/size]

[img]http://dl.iteye.com/upload/attachment/0070/4173/c6f44c86-28fc-3c8c-8750-51410f60b48f.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/0070/4175/11eb4a6a-0f41-3d67-8a5d-7729274aac56.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/0070/4177/10930ef1-a95a-3fbd-a4b4-9eac2c9671b6.jpg[/img]

Easyean

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Struts2整合之动态图表OpenFlashChart

[size=medium]Java开源项目中制作图表比较出色的就是JFreeChart了，相信大家都听说过，它不仅可以做出非常漂亮的柱状图，饼状图，折线图基本图形之外，还能制作甘特图，仪表盘等图表。在Web应用中可以为项目增色不少。JFreeChart技术成熟，完全是通过Java代码控制图表生成，掌握难度不大。但是它的一个缺点就是所有资源在服务器端生成，需要占用大量的服务器资源，而且图表以流的形式...
复制链接

扫一扫