在 Eclipse RCP 中运用 Open Flash Chart 展现图表
openkk
13年前
<p><a name="1.Open Flash Chart 简介|outline"><span class="atitle">Open Flash Chart 简介</span></a></p> <p>Open Flash Chart（OFC）是一个开源的 Flash 图表绘制工具，提供了各种程序接口的数据生成方式，包括 PHP、Ruby、Perl、Python、Java、.Net、AS、JS 等，OFC 2.0 提供了对 JSON 格式数据的支持。通过 Flash 展示的功能，很简单的就生成一份直观形象的数据统计图表，是制作 Flash 图形报表的不错开源工具。</p> <p>OFC 的出现，源自作者作为客户经历的一个不愉快的故事。OFC 的作者曾经使用了某个公司开发的 Flash 图表软件，但在使用时出现了一个问题，于是作者写信去询问什么时候可以解决这个问题。令作者感到不愉快的是，过了三四个星期都没有得到答复。作者想，他应 该学习下Flash 和 Actionscript，自己写一个软件来用。因此，OFC 出现了！作者把 OFC 放到 sourceforge，作为一个免费的开源软件来发布。作者最后说，千万不要招惹你的客户 (don't piss off your customers) 。</p> <p>Open Flash Chart 提供了很强大的图形报表绘制功能，依赖于 Flash，使得图形美观、流畅，具有很好的动态效果，因此，越来越受开发人员和用户的欢迎。</p> <p>Open Flash Chart 所支持的统计样式比较丰富，包括： Line Chart，Bar Chart，Sketch Bar Chart, Horizontal Bar Chart, Stacked Bar Chart, Area Chart, Pie Chart, Scatter Chart, Radar Chart 等等。下面是部分样式的示例图。</p> <br /> <a name="N100C8"><b>图 1. OFC 部分样式的示例图</b></a> <br /> <img alt="在 Eclipse RCP 中运用 Open Flash Chart 展现图表" src="https://simg.open-open.com/show/167b9923f527b33a73f63b86d4a4eacc.jpg" width="582" height="621" /> <br /> <p><a name="2.Open Flash Chart 在 Web 上的应用|outline"><span class="atitle">Open Flash Chart 在 Web 上的应用</span></a></p> <p>目前，Open Flash Chart 主要应用在 Web 开发上，实现了很好的图形效果。OFCGWT 项目是Google在 Web 方面应用 OFC 的一个实例。OFCGWT 基于 Open Flash Chart 2 开发，用于GWT 应用的开源图表制作组件。</p> <p>Web 开发中，主要使用下面两个文件，</p> <ul> <li>open-flash-chart.swf: Flash 文件接口，通过该文件来生成 Flash 文件，备页面调用(在 web 目录下，与 WEB-INF 目录并级)。</li> </ul> <ul> <li>swfobject.js: Flash 文件依赖的 JS 文件(在 web 目录下，与 WEB-INF 目录并级)。</li> </ul> <p><a name="N100EC"><span class="smalltitle">调用 open-flash-chart.swf</span></a></p> <p>首先在页面中编写 script 脚本,保存页面为 chart.html。</p> <br /> <a name="N100F7"><b>清单 1. chart.html</b></a> <br /> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td class="code-outline"><pre class="displaycode"> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("open-flash-chart.swf", "my_chart", "250", "200", "9.0.0"); </script> <p>Hello World</p> <div id="my_chart"></div> </pre></td> </tr> </tbody> </table> <br /> <p><a name="N100FE"><span class="smalltitle">编写 JSON 数据</span></a></p> <p>其次，编写图表的 JSON 文本，将该文本保存为 data.json, 放在与 chart.html 同一个目录下。</p> <br /> <a name="N10109"><b>清单 2. JSON 数据样本</b></a> <br /> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td class="code-outline"><pre class="displaycode">{ "title":{ "text": "Many data lines", "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}" }, "y_legend":{ "text": "Open Flash Chart", "style": "{color: #736AFF; font-size: 12px;}" }, "elements":[ { "type": "bar", "alpha": 0.5, "colour": "#9933CC", "text": "Page views", "font-size": 10, "values" : [9,6,7,9,5,7,6,9,7] }, { "type": "bar", "alpha": 0.5, "colour": "#CC9933", "text": "Page views 2", "font-size": 10, "values" : [6,7,9,5,7,6,9,7,3] } ], "x_axis":{ "stroke":1, "tick_height":10, "colour":"#d000d0", "grid_colour":"#00ff00", "labels": ["January","February","March","April","May", "June","July","August","Spetember"] }, "y_axis":{ "stroke": 4, "tick_length": 3, "colour": "#d000d0", "grid_colour": "#00ff00", "offset": 0, "max": 20 } }</pre></td> </tr> </tbody> </table> <br /> <p><a name="N10110"><span class="smalltitle">OFC图表展示</span></a></p> <p>在浏览器地址栏输入URL，比如：<a href="/misc/goto?guid=4959498117963038848">http://localhost:8080/chart/chart.html?ofc=data.json</a>, 就可以看到的图表效果。</p> <br /> <a name="N1011E"><b>图 2. Web 图表效果</b></a> <br /> <img alt="在 Eclipse RCP 中运用 Open Flash Chart 展现图表" src="https://simg.open-open.com/show/0e1790e7bf22cfc978976abade792c94.jpg" width="330" height="417" /> <br /> <br /> <p><a name="3.在 Eclipse RCP 中使用 Open Flash Chart|outline"><span class="atitle">在 Eclipse RCP 中使用 Open Flash Chart</span></a></p> <p>目前，有许多应用的 GUI 是基于 Eclipse RCP 或者 SWT 开发的。但是 OFC 这样强大的图形报表工具还没有出现在 Eclipse RCP 应用中。在这些应用中也需要绘制图形报表，需要 Open Flash Chart 这样的工具来实现很好的图形效果。</p> <p>Open Flash Chart 2 在 Eclipse RCP 中的使用很简单。在 SWT 组件中，通过 Flash 播放器来播放 open-flash-chart.swf，然后再加载图表的 JSON 格式数据即可。</p> <p><a name="N10137"><span class="smalltitle">在 RCP 中播放 Open Flash Chart</span></a></p> <p>要使用 Open Flash Chart，我们需要播放 open-flash-chart.swf 这个文件。在 Window 平台，我们使用包 org.eclipse.swt.ole.win32 提供的 Ole 组件来实现 Flash 的播放。</p> <ol type="1"> <li>注册 Flash 组件</li> </ol> <p>首先创建一个 OleFrame 对象来作为容纳 Ole 对象的容器，然后再创建一个 Flash 类型的 Ole对象。"ShockwaveFlash.ShockwaveFlash" 为 Macromedia Flash 的 ShockwaveFlash 控件在 Windows 平台上的唯一标识符，程序将自动使用当前控件的最新版本。打开 Windows 注册表,在注册表中可以找到 HKEY_CLASSES_ROOT\ShockwaveFlash.ShockwaveFlash 相关项及对应版本。</p> <br /> <a name="N1014B"><b>清单 3. 注册Flash组件</b></a> <br /> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td class="code-outline"><pre class="displaycode">OleFrame oleFrame = new OleFrame(shell, SWT.NONE); oleFrame.setLayoutData(new GridData(GridData.FILL_BOTH)); OleControlSite controlSite = new OleControlSite(oleFrame, SWT.NONE, "ShockwaveFlash.ShockwaveFlash"); controlSite.doVerb(OLE.OLEIVERB_SHOW); //定义为显示控件</pre></td> </tr> </tbody> </table> <br /> <ol type="1"> <li>通过 OleAutomation 来调用注册组件</li> </ol> <p>对 Active X 控件的操作通过 OleAutomation 对象来实现，并通过 automation.getIDsOfNames()来得到控件方法对应的 id 值。借助 OleView.exe 工具，可以查看 ActiveX 控件的方法。</p> <br /> <a name="N1015D"><b>清单 4. 调用注册的 Flash 组件</b></a> <br /> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td class="code-outline"><pre class="displaycode">final OleAutomation automation = new OleAutomation(controlSite); int[] methodIDs = automation.getIDsOfNames(new String[] { "LoadMovie" });</pre></td> </tr> </tbody> </table> <br /> <ol type="1"> <li>加载 JSON 文件</li> </ol> <p>通过 automation.invoke(int, Variant[]) 来调用 Active X 控件的方法。其中的 int 参数表示要调用的 Active X 控件的方法的 ID，Variant[] 参数就是要传递给 Active X 控件的方法的参数。</p> <br /> <a name="N1016F"><b>清单 5. 加载 JSON 文件，调用控件</b></a> <br /> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td class="code-outline"><pre class="displaycode">Variant[] methodArgs = { new Variant(0), new Variant(file+"?data-file=jsonfile.txt ") }; automation.invoke(methodIDs[0], methodArgs);</pre></td> </tr> </tbody> </table> <br /> <p>在清单5中，String file 是 open-flash-chart.swf 的绝对路径，jsonfile.txt 是需要加载的 JSON 数据的文件路径。</p> <p><a name="N10179"><span class="smalltitle">图表数据文件的生成</span></a></p> <p>要通过 Open Flash Chart 来绘制图表，需要生成图表对应的 JSON 数据文件。我们使用 Json Tools 来对 JSON 进行处理。</p> <ol type="1"> <li>使用 JSON Tools</li> </ol> <p>JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，基于 ECMAScript 标准中对ObjectLiteral 的定义 (ECMA-262, 11.1.5)，通过一组键值对来定义一个对象。可以用 JSON 来描述一个图表，然后通过 Open Flash Chart 加载 JSON 数据持久化后的文本文本，就能展示这个图表。</p> <p>JSON Tools 采用 Java 面向对象的方法对 JSON 的处理进行了封装。使用 JSON Tools 封装的API，可以很方便的对 JSON 格式的文本进行操作，进行 JSON 文本到 java 对象之间的相互转换。利用 JSON Tools，即使对 JSON 不是很了解的开发人员，也能很容易的构造出想要的 JSON 格式文本。在 <a href="/misc/goto?guid=4959498118050246671">http://developer.berlios.de/projects/jsontools/</a> 可以下载到 JSON Tools.</p> <ol type="1"> <li>Chart 模型的设计</li> </ol> <p>我们根据 Chart 需要支持的相关属性来设计 Chart 的模型。依赖于 JSON Tools，采用策略模式进行 Chart 模型和 JSON 对象间的转换。下面是简单的设计类图。</p> <br /> <a name="N1019C"><b>图 3. Chart 模型设计类图 </b></a> <br /> <img alt="在 Eclipse RCP 中运用 Open Flash Chart 展现图表" src="https://simg.open-open.com/show/fff2d4d4536ba30b2138859dbcb4e31f.jpg" width="553" height="261" /> <br /> <p>各种不同类型的 Chart 需要继承和扩展 Element 来实现。通过 Chart 模型，使用面向对象的编程方法，只需调用 ChartData 里的 buildJSON 方法就可以构建展示 Flash 图表所需要的 JSON 格式的文本文件。</p> <p>buildJSON 方法是从 Chart 模型到 JSON 对象转换的桥梁，这个方法中，根据 Chart 的属性和 JSON 文本的映射关系进行转换。这里给出 AbstractAxis 中的 buildJSON 方法：</p> <br /> <a name="N101B1"><b>清单 6. buildJSON 方法</b></a> <br /> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td class="code-outline"><pre class="displaycode">public JSONValue buildJSON() { JSONObject json = new JSONObject(); if (stroke != null) json.getValue().put( "stroke", new JSONInteger(BigInteger.valueOf(stroke))); if (colour != null) json.getValue().put("colour", new JSONString(colour)); if (gridColour != null) json.getValue().put("grid-colour", new JSONString(gridColour)); if (steps != null) json.getValue().put("steps", new JSONInteger(BigInteger.valueOf(steps))); if (offset != null) json.getValue().put("offset", new JSONInteger(BigInteger.valueOf(offset))); if (zdepth3d != null) json.getValue().put("3d", new JSONInteger(BigInteger.valueOf(zdepth3d))); if (min != null) json.getValue().put("min", new JSONInteger(BigInteger.valueOf(min))); if (max != null) json.getValue().put("max", new JSONInteger(BigInteger.valueOf(max))); return json; }</pre></td> </tr> </tbody> </table> <br /> <p><a name="4.JFreeChart，BIRT Chart 和 Open Flash Chart 比较|outline"><span class="atitle">JFreeChart，BIRT Chart 和 Open Flash Chart 比较</span></a></p> <p>JFreeChart，BIRT Chart 和 Open Flash Chart 是3种应用较多的图表绘制工具。这三种工具各有自身的优势。为了更好的对这3中图表绘制工具进行比较，我们基于 RCP 实现了这3种绘制工具对比的示例，下图给出了 Bar Chart 和 Area Chart 两种类型 chart 的对比。</p> <br /> <a name="N101C2"><b>图 4. 三种 Charts 对比示例</b></a> <br /> <img alt="在 Eclipse RCP 中运用 Open Flash Chart 展现图表" src="https://simg.open-open.com/show/a79a9b9f0cbc709336984b70c8c2e544.jpg" width="582" height="508" /> <br /> <p>JFreeChart 是一种基于 JAVA 语言的图表开发技术。 JFreeChart 可用于 Servlet，JSP，applet，Java Appication 环境中。 JFeeChart 中有 DataSet 这个数据集对象，提供了很强的数据处理的功能，并且还能对已经生成的图形进行调整和配置操作。</p> <p>BIRT Chart 是基于 Eclipse 的开源报表工具。BIRT 可以产生 PNG, JPG, BMP, SVG 格式的图形，使得图形的使用范围很广泛。另外，BIRT 有很强的数据访问的功能，提供了 JDBC, XML, Web Services 和 Flat File 数据源处理的支持。</p> <p>Open Flash Chart 是 Flash 图形报表工具。它最大的特点就是使用简单，图形美观，拥有很好的动态效果。对于 OFC2，它只需加载一个图形对应的 JSON 格式文本，就能在 Flash 中展示图形报表，可以通过修改 JSON 文本来改变图形的数据和展现效果。</p> <br /> <a name="表格1|table"><b>表 1. 三种 charts 比较</b></a> <br /> <table class="ibm-data-table ke-zeroborder" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="text-align:center;vertical-align:middle;"><strong>Name</strong> </td> <td style="text-align:center;vertical-align:middle;"><strong>License</strong> </td> <td style="text-align:center;vertical-align:middle;"><strong>Latest Version</strong> </td> <td style="text-align:center;vertical-align:middle;"><strong>OSSC Review Level 1 in IBM</strong> </td> </tr> <tr> <td style="text-align:left;vertical-align:top;">JFreeChart</td> <td style="text-align:left;vertical-align:top;">LGPL</td> <td style="text-align:left;vertical-align:top;">1.0.11</td> <td style="text-align:left;vertical-align:top;">No</td> </tr> <tr> <td style="text-align:left;vertical-align:top;">BIRT Chart</td> <td style="text-align:left;vertical-align:top;">Eclipse Public License 1.0</td> <td style="text-align:left;vertical-align:top;">2.3.1</td> <td style="text-align:left;vertical-align:top;">Yes</td> </tr> <tr> <td style="text-align:left;vertical-align:top;">Open Flash Chart</td> <td style="text-align:left;vertical-align:top;">LGPL</td> <td style="text-align:left;vertical-align:top;">2</td> <td style="text-align:left;vertical-align:top;">No</td> </tr> </tbody> </table> <br /> <br /> <p><a name="resources"><span class="atitle">参考资料 </span></a></p> <ul> <li>查看 <a href="/misc/goto?guid=4958183401282618874">Open Flash Chart 项目主页</a>。 <br /> <br /> </li> <li>下载 <a href="/misc/goto?guid=4959498118294193085">Open Flash Chart 2</a>。 <br /> <br /> </li> <li>查看 <a href="/misc/goto?guid=4959498118385316939">Google OFCGWT 项目</a>。 <br /> <br /> </li> <li><a>如何使用 Flash 控件请参考《Eclipse从入门到精通》第 2 版的访问 ActiveX 章节。</a><br /> <br /> </li> <li>在 Windows 中使用 Active X 控件，请参考 <a href="/misc/goto?guid=4959498118562029250">BlogJava 上相关文章</a>。 <br /> <br /> </li> <li><a>OleView.exe 来自 Windows 资源工具包“Windows Resource Kit Tools”，可以从 Windows 网站上下载。</a> <br /> <br /> </li> <li>查看 <a href="/misc/goto?guid=4959498118645888318">Introducing JSON</a>。 <br /> <br /> </li> <li>下载 <a href="/misc/goto?guid=4959498118050246671">Java JSON Tools</a>。 <br /> <br /> </li> <li>了解 <a href="/misc/goto?guid=4958201349754676817">JFreeChart</a><br /> <br /> </li> <li><a href="/misc/goto?guid=4958184743724309295">Business Intelligence and Reporting Tools</a><br /> <br /> </li> <li>在 <a href="/misc/goto?guid=4959498118918712940">Eclipse Plugin 中使用 BIRT Chart</a>。 <br /> <br /> </li> <li>访问 developerWorks <a href="/misc/goto?guid=4959498118997613166">开放源码专区</a> 获得丰富的 how-to 信息、工具和项目更新，帮助您用开放源码技术进行开发，并将它们结合 IBM 产品使用。<br /> <br /> </li> <li>查看 IBM developerWorks 的 <a href="/misc/goto?guid=4959498119077755370">Eclipse 项目资源</a>，提高您的 Eclipse 技巧。</li> </ul> <p><a href="/misc/goto?guid=4959498119163053654" target="_blank">http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-ofc/</a></p>