最新ofc-java学习资料.doc
Four short words sum up what has lifted most successful individuals above the crowd: a little bit more.-author-dateofc-java学习资料ofc-java学习资料Open-Flash-Chart学习说明 前几天思思老说要主动为公司写一些图形化统计的功能，我找了几个图形化工具，帮她先研究了下，哈 为什么选open-flash-chart呢？哈，因为图形比较漂亮，哈，而且用起来挺方便的！_ open-flash-chart是一个flash图形工具，主要通过JS设置参数来控制图形的显示，主要有线、柱状及饼图. 基本上能满足数据统计分析的图形化显示需求。优点：使用方便，一般浏览器都能支持使用，提供回调功能支持更高级的处理。目录下JS是与swf交互的核心脚本，不过有些地方好像写得不大好，有些语法不遵从W3C标准，呵一点见解：个人觉得用ajax请求数据，然后在前台控制图形的显示比较好。比起在后台直接生成HTML代码返回直接打印的好，怎么说网络传输量可以减少些，而且用前者还可能做成类似单例的加载方式。所以个有觉得没必要用PHP或JAVA等其它语言从后台返回的HTML的方式（虽然OPEN-FLASH-CHART已经有支持的类），个人还是喜欢在前台用JS的方式来控制图形，哈哈百变不离其宗!下面是我整理的一些文档，可以参考，应该是比较齐的了: =2010.11.17=JOFC2 - Java API for Open Flash Chart Version-22010-09-11 00:26 最近在用Open Flash Chart做报表，在网上查了很多关于Open Flash Chart2的资料，可惜的是中文资料很少。现在自己开始开发基于Struts 1的Open Flash Chart开发，准备在我的空间里把JOFC2中针对的各个图表的用法写出来，给大家做个借鉴首先下载JOFC2的jar包，可以在 的扩展可以在 旅.一.jsp的写法:<% page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%><html><head><script type="text/javascript" src="js/swfobject.js"></script><script type="text/javascript" src="js/json2.js"></script><script type="text/javascript">swfobject.embedSWF("open-flash-chart.swf", "my_chart", "40%", "40%", "9.0.0","expressInstall.swf","data-file":"<%=request.getContextPath()%>/testAction.do",wmode:"transparent");</script></head><body><p>Hello World</p><div id="my_chart"></div></body></html>其中<%=request.getContextPath()%>/testAction.do就是指定的我们的Action的路径。二.Struts Action:以下代码是Struts1 Action中的execute的写法1)PieChart 饼图:public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) / TODO Auto-generated method stubtryPieChart pie = new PieChart();pie.setFontSize(15);/ 设置字体pie.addSlice(200000000, " 实收费用 " );/ 分类pie.addSlice(60000000, " 欠费金额 " );pie.addSlice(30000000, " 报停金额 " )pie.addSlice(20000000, " 减免金额 " );pie.setStartAngle(100);/ 设置角度pie.setAnimate( true );/ 设置颜色pie.setColours( new String "0x336699" , "0x88AACC" , "0x999933" ,"0x666699" , "0xCC9933" , "0x006666" , "0x3399FF" , "0x993300" ,"0xAAAA77" , "0x666666" , "0xFFCC66" , "0x6699CC" , "0x663366" ,"0x9999CC" , "0xAAAAAA" , "0x669999" , "0xBBBB55" , "0xCC6600" ,"0x9999FF" , "0x0066CC" , "0x99CCCC" , "0x999999" , "0xFFCC00" ,"0x009999" , "0x99CC33" , "0xFF9900" , "0x999966" , "0x66CCCC" ,"0x339966" , "0xCCCC33" );pie.setTooltip( "#val# / #total#<br> 占百分之 #percent#");/ 鼠标移动上去后提示内容pie.setRadius(20);Chart flashChart = new Chart( " 2009至2010年度 包烧费分析 " , "font-size:30px;color:#ff0000;" ); / 整个图的标题 /flashChart.setBackgroundColour("#3EFFFF");flashChart.addElements(pie); / 把饼图加入到图表 String json = flashChart.toString();/ 转成 json 格式response.setContentType( "application/json-rpc;charset=utf-8" );response.setHeader( "Cache-Control" , "no-cache" );response.setHeader( "Expires" , "0" );response.setHeader( "Pragma" , "No-cache" ); response.getWriter().print(json);/ 写到客户端catch(Exception ex)ex.printStackTrace();return null;显示效果如下：2)BarChart 柱状图:tryBarChart chart = new BarChart(BarChart.Style. GLASS ); / 设置条状图样式/FilledBarChart chart = new FilledBarChart("red","blue");/ 设置条状图样式/String sMax = "10000" ;long max = 900; / /Y 轴最大值Map<String,Long> map = new HashMap<String,Long>();map.put( "5" , new Long(50);map.put( "6" , new Long(45);map.put( "7" , new Long(60);map.put( "8" , new Long(30);map.put( "9" , new Long(80);map.put( "10" , new Long(500);map.put( "11" , new Long(800);map.put( "12" , new Long(200);XAxis x = new XAxis(); / X 轴int i = 5;for (String key:map.keySet()x.addLabels(i+"月份"); / x 轴的文Bar bar = new Bar(map.get(""+i), " 万元 " );i+;bar.setColour( "0x336699" ); / 颜色bar.setTooltip(map.get(""+i) + " 万元 " ); / 鼠标移动上去后的提示chart.addBars(bar); / 条标题，显示在 x 轴上Chart flashChart = new Chart(); flashChart.addElements(chart); / 把柱图加入到图表 YAxis y = new YAxis(); /y 轴 y.setMax(max+10.0); /y 轴最大值 y.setSteps(max/10*1.0); / 步进 flashChart.setYAxis(y); flashChart.setXAxis(x); String json = flashChart.toString();response.setContentType( "application/json-rpc;charset=utf-8" );response.setHeader( "Cache-Control" , "no-cache" );response.setHeader( "Expires" , "0" );response.setHeader( "Pragma" , "No-cache" ); response.getWriter().print(json);/ 写到客户端catch(Exception ex)ex.printStackTrace();return null;显示效果如下：2)LineChart 折线图:public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) / TODO Auto-generated method stubtryLineChart lineChart = new LineChart();lineChart.setFontSize(15);/ 设置字体lineChart.setTooltip("#val#%");/设置鼠标移到点上显示的内容LineChart.Dot dot1 = new LineChart.Dot(70);/按照顺序设置各个点的值LineChart.Dot dot2 = new LineChart.Dot(85);LineChart.Dot dot3 = new LineChart.Dot(44);LineChart.Dot dot4 = new LineChart.Dot(67);LineChart.Dot dot5 = new LineChart.Dot(90);LineChart.Dot dot6 = new LineChart.Dot(64);LineChart.Dot dot7 = new LineChart.Dot(28);LineChart.Dot dot8 = new LineChart.Dot(99);lineChart.addDots(dot1);/按照顺序把点加入到图形中lineChart.addDots(dot2);lineChart.addDots(dot3);lineChart.addDots(dot4);lineChart.addDots(dot5);lineChart.addDots(dot6);lineChart.addDots(dot7);lineChart.addDots(dot8);XAxis x = new XAxis(); / X 轴x.addLabels("5月份");x.addLabels("6月份");x.addLabels("7月份");x.addLabels("8月份");x.addLabels("9月份");x.addLabels("10月份");x.addLabels("11月份");x.addLabels("12月份");/x.setColour("0x000000");long max = 100; / /Y 轴最大值YAxis y = new YAxis(); /y 轴 y.setMax(max+0.0); /y 轴最大值 y.setSteps(10); / 步进 Chart flashChart = new Chart( " 历年收费率报表 " , "font-size:12px;color:#ff0000;" ); / 整个图的标题 flashChart.addElements(lineChart); / 把饼图加入到图表 Text yText = new Text("历年缴费率曲线图",Text.createStyle(20, "#736AFF", Text.TEXT_ALIGN_CENTER);flashChart.setYAxis(y); flashChart.setXAxis(x); flashChart.setYLegend(yText);/设置y轴显示内容String json = flashChart.toString();/ 转成 json 格式response.setContentType( "application/json-rpc;charset=utf-8" );response.setHeader( "Cache-Control" , "no-cache" );response.setHeader( "Expires" , "0" );response.setHeader( "Pragma" , "No-cache" ); response.getWriter().print(json);/ 写到客户端catch(Exception ex)ex.printStackTrace();return null;显示效果如下：4)BarChart2 组合柱状图:public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) / TODO Auto-generated method stubtryStackedBarChart chart = new StackedBarChart( ); / 设置组合柱状图long max = 900; / /Y 轴最大值Map<String,Long> map = new HashMap<String,Long>();map.put( "5" , new Long(50);map.put( "6" , new Long(45);map.put( "7" , new Long(60);map.put( "8" , new Long(30);map.put( "9" , new Long(80);map.put( "10" , new Long(500);map.put( "11" , new Long(800);map.put( "12" , new Long(200);XAxis x = new XAxis(); / X 轴x.set3D(0);x.setColour("#909090");x.setGridColour("#ADB5C7");int i = 5;for (String key:map.keySet()StackedBarChart.Stack stack = new StackedBarChart.Stack();/新建柱组x.addLabels(i+"月份"); / x 轴的文字StackedBarChart.StackValue stackValue = new StackedBarChart.StackValue(map.get(""+i),"0x336699");/每组柱状图每个柱的设置StackedBarChart.StackValue stackValue2 = new StackedBarChart.StackValue(i * 5 + 10,"#3334AD");StackedBarChart.StackValue stackValue3 = new StackedBarChart.StackValue(i * 10 + 20,"#D54C78");i+;stack.addStackValues(stackValue);stack.addStackValues(stackValue2);stack.addStackValues(stackValue3);chart.addStack(stack); / 条标题，显示在 x 轴上StackedBarChart.Key key1 = new StackedBarChart.Key("0x336699","包烧费",10);StackedBarChart.Key key2 = new StackedBarChart.Key("#3334AD","热表收费",10);StackedBarChart.Key key3 = new StackedBarChart.Key("#D54C78","生活热水收费",10);chart.addKeys(key1);chart.addKeys(key2);chart.addKeys(key3);Chart flashChart = new Chart("组合柱状图","font-size:20px; color: #FFFFFF; margin: 5px; background-color: #505050; padding:5px; padding-left: 20px; padding-right: 20px;"); flashChart.addElements(chart); / 把柱图加入到图表 YAxis y = new YAxis(); /y 轴 y.set3D(0);y.setColour("#909090");y.setGridColour("#ADB5C7");y.setMax(max+10.0); /y 轴最大值 y.setSteps(max/10*1.0); / 步进 flashChart.setYAxis(y); flashChart.setXAxis(x); Text text = new Text("Open Flash Chart 3D Bar");text.setStyle(Text.createStyle(15, "#736AFF", Text.TEXT_ALIGN_RIGHT);flashChart.setYLegend(text);/设置Y轴左侧的文字String json = flashChart.toString();response.setContentType( "application/json-rpc;charset=utf-8" );response.setHeader( "Cache-Control" , "no-cache" );response.setHeader( "Expires" , "0" );response.setHeader( "Pragma" , "No-cache" ); response.getWriter().print(json);/ 写到客户端catch(Exception ex)ex.printStackTrace();return null;显示效果如下图=2010.11.24=使用 JOFC2 在 Web 和 RCP 中展现图表雷 真, 软件工程师, IBM雷真毕业于西安交通大学计算机科学与技术专业，并获得硕士学位，现在 IBM CSTL WebAdmin team 从事自动化测试的开发工作。简介： Open Flash Chart 是一款使用 Flash 来展示图表的开源工具，图形美观、直接，JOFC2 是实现了 Open Flash Chart 的 Java API，文章通过 PieChart 和 StackedBarChart 的实例，介绍了使用 JOFC2 来开发 Open Flash Chart 图表的流程。标记本文！发布日期： 2010 年 10 月 21 日 级别： 初级 访问情况 509 次浏览 建议: 0 (添加评论) 平均分 （共 0 个评分 ）1. Open Flash Chart 简介Open Flash Chart（OFC）使用 Flash 来动态展示生成的图表，具有简洁、美观的特点，其官方主页为：http:/teethgrinder.co.uk/open-flash-chart-2/。现在 Open Flash Chart 已经更新到 V2，在新的版本中，作者使用 Adobe Flex 来编译 Actionscript3，并且采用 JSON 作为数据交互的格式，OFC 提供了对 PieChart、StackedBarChart、LineChart 等常见图表的支持。当前实现了 OFC 的编程语言有 PHP、Perl、Python、Ruby、.NET、 Google Web Toolkit 和 Java，我们可以从 http:/teethgrinder.co.uk/open-flash-chart-2/tutorial-other-libraries.php 获取详细信息，其中，JOFC2 是 OFC 的一种 Java 实现，它可以将 OFC 使用的数据结构模型通过 Java 语言进行描述，然后序列成 JSON 文本，从而为 OFC 图表的展示提供数据来源。回页首2. Open Flash Chart 图表展示原理OFC 展示图表时，主要用到两个文件：用于显示 Flash 的 open-flash-chart.swf 和用于描述图表数据的 JSON 文件，整个显示流程就是浏览器（Web 应用）或者 RCP 程序装载 Flash 文件 open-flash-chart.swf，并读取 JSON 文件的内容，然后在 open-flash-chart.swf 中进行图表的绘制。OFC 在 Web 中的展示在 Web 应用中使用 OFC，首先将 open-flash-chart.swf 文件拷贝到网站的目录下，然后在需要显示图表的 html 页面中加入装载该 Flash 的代码，典型的播放 Flash 的方法如清单 1 所示：清单 1. 网页中装载 Flash 插件 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= " width="500" height="500" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="open-flash-chart.swf" /> <param name="quality" value="high" /> <embed src="open-flash-chart.swf" quality="high" bgcolor="#FFFFFF" width="500" height="500" name="open-flash-chart" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" /> </object> 清单 1 只是实现了针对 open-flash-chart.swf 的装载，而并不能实现图表的绘制，因为 OFC 使用 JSON 文件来描述图表数据，那么如何让 open-flash-chart.swf 找到包含了图表数据信息的 JSON 文件呢？ OFC 提供了两种实现方法：（1）因为 OFC 会在 URL 中自动寻找名为 ofc 的变量，并将其值作为 JSON 文件的路径，所以如果假设请求包含清单 1 的页面的 URL 为 作为请求的地址，其中 json.txt 就是包含了图表数据信息的 JSON 文件的路径。如果 JSON 文件和 open-flash-chart.swf 不在同一个目录，则使用相对路径进行表示即可。（2）另外一种指定 JSON 文件的方法是在清单 1 中，修改 open-flash-chart.swf 为 open-flash-chart.swf?data-file=json.txt，即使用变量 data-file 指明 JSON 文件的路径，它也可以是针对 open-flash-chart.swf 的相对路径。OFC 在 RCP 中的展示在 Eclipse RCP 程序中使用 OFC，也有 Flash 插件的装载和 JSON 数据文件的指定两个问题需要解决。对于 JSON 数据文件的指定，因为 RCP 程序中不存在请求 URL，所以此时采用 open-flash.chart.swf 后面添加 data-file 变量的方式进行实现。而 Flash 插件的装载，可以有两种实现方法 :（1）借用网页显示 Flash 的原理，在 RCP 程序的 shell 中添加 browser 控件，然后调用 browser 控件的 setText 方法执行清单 1 中的代码：清单 2. 使用 Browser 控件播放 Flash Browser browser = new Browser(shell, SWT.NONE); browser.setText(flashHtml); （2）在 Window 平台上，可以使用包 org.eclipse.swt.ole.win32 提供的 Ole 组件，通过 Active X 的方式来实现 Flash 的播放，实现方式及注释参见清单 3：清单 3. 使用 Active X 方式播放 Flash OleFrame oleFrame = new OleFrame(composite, SWT.NONE); / 创建播放 Flash 插件的 frame OleControlSite controlSite = new OleControlSite(oleFrame, SWT.NONE, "ShockwaveFlash.ShockwaveFlash"); / 创建 flash 插件 controlSite.doVerb(OLE.OLEIVERB_SHOW); OleAutomation automation = new OleAutomation(controlSite); / 控制 Flash 的播放 int ids = automation.getIDsOfNames(new String"LoadMovie"); try String parentFilePath = new File(getClass().getClassLoader().getResource(""). toURI().getParentFile().getPath(); / 得到当前文件的父路径 String fileName = parentFilePath + “ dataopen-flash-chart.swf?data-file=”; / 得到 open-flash-chart.swf 的文件绝对路径 fileName += ChartData.preaprePieChart();/ 生成 pieChart 数据文件 catch(Exception newException) newException.printStackTrace(); / 显示 Flash Variant variants = new Variant(0), new Variant(fileName); automation.invoke(ids0, variants); 回页首3. 使用 JOFC2 生成 JSON 文件OFC 在进行图表展示的时候，JSON 文件提供描述图表的数据，包括：图表的标题、横纵坐标、图表中每个分类项的值、显示的文本样式等等。虽然我们可以依照 OFC 的数据模型，使用 JSON API 或者手写 JSON 数据文件的方式来实现，但是这样一者难度较大，二者开发效率不高。JOFC2 根据 OFC 的数据模型，提供了操作方便的 API 供开发人员使用 ，并能将使用其 API 构建的图表模型序列化为 JSON 描述文件，从而大大易化了开发流程。使用 JOFC2 创建数据模型的一般流程为：创建特定图表类型实例 -> 添加图表描述数据 -> 创建 OFC 图表对象 -> 序列化为 JSON 文件文章采用某虚拟的 IBM 服务器供应商的一到三月份服务器销售为例，来介绍 PieChart、StackedBarChart 的开发流程，其他的图表比如 LineChart、AreaChart、BarChart 等与此类似，读者可以结合 JOFC2 的 Java doc 和文章实例来绘制相应的图表。使用的样本数据如下：表 1. 某虚拟 IBM 服务器供应商销售统计一月二月三月合计System i 30 30 40 100 System p 50 60 90 200 System z 150 150 200 500 PieChartPieChart 的构造大致可以分为三步：首先，实例化一个 PieChart 的实例，并添加每个 slice 的数据信息，如清单 4 所示：清单 4. 实例化 PieChart PieChart chart = new PieChart();/ 创建图表实例 Slice slice = new Slice(100, "System i");/System i 的 slice Slice slice2 = new Slice(200, "System p");/System p 的 slice Slice slice3 = new Slice(500, "System z");/System z 的 Slice 接着，就是确定 PieChart 的显示样式信息，比如 slice 使用的颜色，是否使选中的 slice 有突出显示功能，以及选中的透明度等等：清单 5. 确定 PieChart 的显示样式 chart.setColours( new String "0xFFCC66", "0x6699CC", "0x663366", "0x9999CC" , "0xAAAAAA" , "0x669999", "0xBBBB55", "0xCC6600","0x9999FF", "0x999999", "0xFFCC00" ,"0x339966", "0xCCCC33" );/ 指定每个 slice 的显示颜色 chart.setAnimate(true);/ 使 PieChart 具有突出显示功能最后，实例化包含 PieChart 的 OFC 图表：清单 6. 生成 OFC 图表 Chart flashChart = new Chart("IBM 服务器销量", "font-size:18px;"); / 创建 OFC 图表对象，第一个参数为图表的标题，第二个参数指定标题的样式，遵循 CSS 语法 flashChart.addElements(chart); / 将图表实例添加到 OFC 图表对象中，一个 OFC 图表对象，可以添加多个图表实例最终生成的 OFC 图表如图 1 所示：图 1. PieChart 图表StackedBarChartStackedBarChart 与 PieChart 的图表生成流程大致相同，但是因为二者在图表的内容表示上有所
