[转]Struts2整合之动态图表OpenFlashChart

来源：互联网发布：央视网络直播编辑：程序博客网时间：2024/06/03 19:20

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

原文地址：http://zhou137520.iteye.com/blog/1573398