最近在用Open Flash Chart做报表，在网上查了很多关于Open Flash Chart2的资料，可惜的是中文资料很少。现在自己开始开发基于Struts 1的Open Flash Chart开发，准备在我的空间里把JOFC2中针对的各个图表的用法写出来，给大家做个借鉴 首先下载JOFC2的jar包，可以在/p/jofc2/下载到，另外还有一个开发人员针对jofc2自己 的扩展可以在/job/JOFC2/下载到，以下代码我用到的包是前者。下面我们开始我们的jofc之 旅.... 一.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"> bedSWF( "open-flash-chart.swf", "my_chart", "40%", "40%", "9.0.0", "expressInstall.swf", {"data-file":"<%=ContextPath()%>/testAction.do"}, {wmode:"transparent"}); </script> </head> <body> <p>Hello World</p> <div id="my_chart"></div> </body> </html> 其中<%=ContextPath()%>/testAction.do就是指定的我们的Action的路径。 二.Struts Action: 以下代码是Struts1 Action中的execute的写法 1)PieChart 饼图: public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletRespon respon) { // TODO Auto-generated method stub try{ PieChart pie = new PieChart(); pie.tFontSize(15);// 设置字体 pie.addSlice(200000000, " 实收费用 " );// 分类 pie.addSlice(60000000, " 欠费金额 " ); pie.addSlice(30000000, " 报停金额 " ) pie.addSlice(20000000, " 减免金额 " ); pie.tStartAngle(100);// 设置角度 pie.tAnimate( true ); // 设置颜色 pie.tColours( 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.tTooltip( "#val# / #total#<br> 占百分之 #percent#");// 鼠标移动上去后提示内容 pie.tRadius(20); Chart flashChart = new Chart( " 2009至2010年度 包烧费分析 " , "font-size:30px;color:#ff0000;" ); // wipedata整个图的标题 //flashChart.tBackgroundColour("#3EFFFF"); flashChart.addElements(pie); // 把饼图加入到图表 String json = String();// 转成 json 格式 respon.tContentType( "application/json-rpc;chart=utf-8" ); respon.tHeader( "Cache-Control" , "no-cache" ); respon.tHeader( "Expires" , "0" ); respon.tHeader( "Pragma" , "No-cache" ); Writer().print(json);// 写到客户端 }catch(Exception ex){ ex.printStackTrace(); } return null; } 显示效果如下： 2)BarChart 柱状图: try{ BarChart 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 (""+i), " 万元 " ); i++; bar.tColour( "0x336699" ); // 颜色 bar.(""+i) + " 万元 " ); // 鼠标移动上去后的提示 chart.addBars(bar); // 条标题，显示在 x 轴上 } Chart flashChart = new Chart(); flashChart.addElements(chart); // 把柱图加入到图表 YAxis y = new YAxis(); //y 轴 y.tMax(max+10.0); //y 轴最大值 y.tSteps(max/10*1.0); // 步进 flashChart.tYAxis(y); flashChart.tXAxis(x); String json = String(); respon.tContentType( "application/json-rpc;chart=utf-8" ); respon.tHeader( "Cache-Control" , "no-cache" ); respon.tHeader( "Expires" , "0" ); respon.tHeader( "Pragma" , "No-cache" ); Writer().print(json);// 写到客户端 }catch(Exception ex){ ex.printStackTrace(); } return null; } 显示效果如下： 2)LineChart 折线图广州话翻译器: public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletRespon respon) { // TODO Auto-generated method stub try{ LineChart lineChart = new LineChart(); lineChart.tFontSize(15);// 设置字体 lineChart.tTooltip("#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.tColour("0x000000"); long max = 100; // //Y 轴最大值 YAxis y = new YAxis(); //y 轴 y.tMax(max+0.0); //y 轴最大值 y.tSteps(10); // 步进 Chart flashChart = new Chart( " 历年收费率报表 " , "font-size:12px;color:#ff0000;" ); // 整个图的标题 flashChart.addElements(lineChart); // 把饼图加入到图表 Text yText = new Text("历年缴费率曲线图",ateStyle(20, "#736AFF", Text.TEXT_ALIGN_CENTER)); flashChart.tYAxis(y); flashChart.tXAxis(x); flashChart.tYLegend(yText);//设置y轴显示内容 String json = String();// 转成 json 格式 respon.tContentType( "application/json-rpc;chart=utf-8" ); respon.tHeader( "Cache-Control" , "no-cache" ); respon.tHeader( "Expires" , "0" ); respon.tHeader( "Pragma" , "No-cache" ); Writer().print(json);// 写到客户端 }catch(Exception ex){ ex.printStackTrace(); } return null; } 显示效果如下： 4)BarChart2 组合柱状图: public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletRespon respon) { // TODO Auto-generated method stub try{ StackedBarChart 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.t3D(0); x.tColour("#909090"); x.tGridColour("#ADB5C7"); int i = 5; for (String key:map.keySet()){ StackedBarChart.Stack stack = new StackedBarChart.Stack();//新建柱组 x.addLabels(i+"月份"); // x 轴的文字 StackedBarChart.StackValue stackValue = new StackedBarChart.(""+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.t3D(0); y.tColour("#909090"); y.tGridColour("#ADB5C7"); y.tMax(max+10.0); //y 轴最大值 y.tSteps(max/10*1.0); // 步进 flashChart.tYAxis(y); flashChart.tXAxis(x); Text text = new Text("Open Flash Chart 3D Bar"); text.ateStyle(15, "#736AFF", Text.TEXT_ALIGN_RIGHT)); flashChart.tYLegend(text);//设置Y轴左侧的文字 String json = String(); respon.tContentType( "application/json-rpc;chart=utf-8" ); respon.tHeader( "Cache-Control" , "no-cache" ); respon.tHeader( "Expires" , "0" ); respon.tHeader( "Pragma" , "No-cache" ); Writer().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 来动态展示生成的图表，具有简洁、美观的特点，其官方主页为：。现在 Open Flash Chart 已经更新到 V2，在新的版本中，作者使用 Adobe Flex 来编译 Actionscript3，并且采用 JSON 作为数据交互的格式，OFC 提供了对 PieChart、StackedBarChart、LineChart 等常见图表的支持。当前实现了 OFC 的编程语言有 PHP、Perl、Python、Ruby、、 Google Web Toolkit 和 Java，我们可以从 获取详细信息，其中，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? 作为请求的地址，其中 就是包含了图表数据信息的 JSON 文件的路径。如果 JSON 文件和 open-flash-chart.swf 不在同一个目录，则使用相对路径进行表示即可。（2）另外一种指定 JSON 文件的方法是在清单 1 中，修改 open-flash-chart.swf 为 open-flash-chart.swf?，即使用变量 data-file 指明 JSON 文件的路径，它也可以是针对 open-flash-chart.swf 的相对路径。 OFC 在 RCP 中的展示 在 Eclip RCP 程序中使用 OFC，也有美国数学建模官网 Flash 插件的装载和 JSON 数据文件的指定两个问题需要解决。对于 JSON 数据文件的指定，因为 RCP 程序中不存在请求 URL，所以此时采用 open-flash.chart.swf 后面添加 data-file 变量的方式进行实现。而 Flash 插件的装载，可以有两种实现方法 :（1）借用网页显示 Flash 的原理，在 RCP 程序的 shell 中添加 browr 控件，然后调用 browr 控件的 tText 方法执行清单 1 中的代码： 清单 2. 使用 Browr 控件播放 Flash
（2）在 Window 平台上，可以使用包 lip.swt.ole.win32 提供的 Ole 组件，通过 Active X 的方式来实现 Flash 的播放，实现方式及注释参见清单 3： 清单 3. 使用 Active X 方式播放 Flash
回页首 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 服务器供应商销售统计
PieChart PieChart 的构造大致可以分为三步：首先，实例化一个 PieChart 的实例，并添加每个 slice 的数据信息，如清单 4 所示： 清单 4. 实例化 PieChart
接着，就是确定 PieChart 的显示样式信息，比如 slice 使用的颜色，是否使选中的 slice 有突出显示功能，以及选中的透明度等等： 清单 5. 确定 PieChart 的显示样式
最后，实例化包含 PieChart 的 OFC 图表： 清单 6. 生成 OFC 图表
最终生成的 OFC 图表如图英语四级分值分布情况 1 所示： 图 1. PieChart 图表 StackedBarChart StackedBarChart 与 PieChart 的图表生成流程大致相同，但是因为二者在图表的内容表示上有所不同，所以代码实现上有所差别，具体表现在 StackedBarChart 中增加了横坐标和纵坐标的表示，以及 legend 的使用。 清单draft是什么意思 7. 实例化 StackBarChart
接着，构造横坐标和纵坐标，并生成 OFC 图表： 清单 8. 生成 OFC 图表
最终生成的 OFC 图表如图 2 所示： 图 2. StackedBarChart 图表 生成 JSON 文件 上述代码实现了 OFC 图表数据的模型表示，但是因为 OFC 使用 JSON 文件作为数据描述来源，所以需要将上述的模型转换为 JSON 文本后写入到文件中供 OFC 调用。如果数据模型使用了中文等非英文字符对图表进行描述，则在保存 jsonString 的时候需要采用 UTF-8 编码的形式。参见如下代码： 清单 9. 序列化图表数据文件
4. 两个问题 JOFC2 作为 OFC 的 Java 实现，虽然能够完成 OFC 的大部分功能，并能基本满足实际的开发需要，但笔者在使用过程中遇到了两个需要解决的问题： 纵坐标中文字符的显示 尽管 OFC 使用 UTF-8 编码，从而提供了针对非英文字符显示的支持，但是如果纵坐标的 legend 中包含了中文字符的话，非中文字符能够正确显示，而中文字符并不能正确显示。如 StackedBarChart 例子中的纵坐标的“销量”并没有显示出来，如果将“销量”改为“销量 Selling”的话，我们可以看到，“Selling”可以正确显示： 图 3. 纵坐标英文文本示例 Tooltip 显示格式的覆盖 OFC 中的 Tooltip 支持这样的格式覆盖方式，以 PieChart 为例，设定 PieChart 使用的 Tooltip 显示格式为 format1，那么，该 PieChart 中的每个 slice 都会默认以 format1 作为 Tooltip，如果某个 slice 定义了自己的 Tooltip 显示格式 format2，那么该 slice 会忽略 format1 的作用。但笔者在使用过程中发现，有些变量只能在 PieChart 中使用，而不能在 slice 中使用。比如，在清单 4 中定义如下的全局和局部 Tooltip 显示格式：
对于没有自定义显示格式的 slice（System p 和 System z），可以正常显示全局定义的 Tooltip： 图 4. 全局 Tooltip 示例 而自定义了 Tooltip 的 slice 却无法引用变量 #percent# 的内容： 图 5. flyn局部 Tooltip 示例 上述两个问题是笔者在实际使用过程中遇到的，尚未找到解决方案，欢迎读者来信讨论。 回页首 5. 总结 JOFC2 作为 OFC 的 Java 实现，提供了方便的 API 供开发者使用，使得开发者能在较短的时间内开发出美观的基于 Flash 的动态图表。 | |||||||||||||||||||||||||||||||||||||||||||||
本文发布于:2023-07-07 05:13:55，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/fan/78/1083064.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
