ofc-java学习资料.doc

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包，可以在/p/jofc2/下载到，另外还有一个开发人员针对jofc2自己 的扩展可以在/job/JOFC2/下载到，以下代码我用到的包是前者。下面我们开始我们的jofc之 旅.一.jsp的写法:swfobject.embedSWF(open-flash-chart.swf, my_chart, 40%, 40%, 9.0.0,expressInstall.swf,data-file:/testAction.do,wmode:transparent);Hello World其中/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# 占百分之 #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 map = new HashMap();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 map = new HashMap();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 插件 清单 1 只是实现了针对 open-flash-chart.swf 的装载，而并不能实现图表的绘制，因为 OFC 使用 JSON 文件来描述图表数据，那么如何让 open-flash-chart.swf 找到包含了图表数据信息的 JSON 文件呢？ OFC 提供了两种实现方法：（1）因为 OFC 会在 URL 中自动寻找名为 ofc 的变量，并将其值作为 JSON 文件的路径，所以如果假设请求包含清单 1 的页面的 URL 为 /openflashchart.html，那么，我们可以使用 /openflashchart.html?ofc=json.txt 作为请求的地址，其中 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 StringLoadMovie); 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 的图表生成流程大致相同，但是因为二者在图表的内容表示上有所不同，所以代码实现上有所差别，具体表现在 StackedBarChart 中增加了横坐标和纵坐标的表示，以及 legend 的使用。清单 7. 实例化 StackBarChart StackedBarChart chart = new StackedBarChart(); Key key = new Key(0xFFCC66, System i, 10); /System i 的标识，第一个参数为颜色，第二个参数为名称，第三个参数为文本的大小 Key key2 = new Key(0x6699CC, System p, 10); Key key3 = new Key(0x339966, System z, 10); chart.addKeys(key); chart.addKeys(key2); chart.addKeys(key3); chart.addStack(new Stack().addStackValues(new StackValue(20,0xFFCC66), new StackValue(50,0x6699CC), new StackValue(150,0x339966); / 添加一个 Stack，每个 Stack 由 3 部分组成，System i 的销量，System p 的销量和 System z 的销量 chart.addStack(new Stack().addStackValues(new StackValue(20,0xFFCC66), new StackValue(60,0x6699CC), new StackValue(150,0x339966); chart.addStack(new Stack().addStackValues(new StackValue(30,0xFFCC66), new StackValue(90,0x6699CC), new StackValue(200,0x339966); 接着，构造横坐标和纵坐标，并生成 OFC 图表：清单 8. 生成 OFC 图表 XAxis xAxis = new Xaxis();/ 实例化横坐标 xAxis.setLabels(1 月, 2 月, 3 月);/ 横坐标上每个刻度显示的文本 YAxis yAxis = new Yaxis();/ 实例化纵坐标 yAxis.setMax(350); / 设定最大值，默认最小值从 0 开始，可以使用 setRange(Number min, Number max, Number step) / 方法来确定纵坐标的最小值、最大值以及步进 Chart flashChart = new Chart(IBM 服务器销量, font-size:18px;); / 实例化 OFC 图表 flashChart.addElements(chart); flashChart.setXAxis(xAxis); flashChart.setYAxis(yAxis); flashChart.setXLegend(new Text(月份, Text.TEXT_ALIGN_CENTER).setStyle( font-size:12px;color:0xBBBB55;); / 设定横坐标的 legend flashChart.setYLegend(new Text(销量, Text