在 Eclipse RCP 中運用 Open Flash Chart 展現圖表

openkk 13年前發布 | 83K 次閱讀 Eclipse 圖表/報表制作

Open Flash Chart（OFC）是一個開源的 Flash 圖表繪制工具，提供了各種程序接口的數據生成方式，包括 PHP、Ruby、Perl、Python、Java、.Net、AS、JS 等，OFC 2.0 提供了對 JSON 格式數據的支持。通過 Flash 展示的功能，很簡單的就生成一份直觀形象的數據統計圖表，是制作 Flash 圖形報表的不錯開源工具。

OFC 的出現，源自作者作為客戶經歷的一個不愉快的故事。OFC 的作者曾經使用了某個公司開發的 Flash 圖表軟件，但在使用時出現了一個問題，于是作者寫信去詢問什么時候可以解決這個問題。令作者感到不愉快的是，過了三四個星期都沒有得到答復。作者想，他應該學習下Flash 和 Actionscript，自己寫一個軟件來用。因此，OFC 出現了！作者把 OFC 放到 sourceforge，作為一個免費的開源軟件來發布。作者最后說，千萬不要招惹你的客戶 (don't piss off your customers) 。

Open Flash Chart 提供了很強大的圖形報表繪制功能，依賴于 Flash，使得圖形美觀、流暢，具有很好的動態效果，因此，越來越受開發人員和用戶的歡迎。

Open Flash Chart 所支持的統計樣式比較豐富，包括： Line Chart，Bar Chart，Sketch Bar Chart, Horizontal Bar Chart, Stacked Bar Chart, Area Chart, Pie Chart, Scatter Chart, Radar Chart 等等。下面是部分樣式的示例圖。

圖 1. OFC 部分樣式的示例圖
在 Eclipse RCP 中運用 Open Flash Chart 展現圖表

Open Flash Chart 在 Web 上的應用

目前，Open Flash Chart 主要應用在 Web 開發上，實現了很好的圖形效果。OFCGWT 項目是Google在 Web 方面應用 OFC 的一個實例。OFCGWT 基于 Open Flash Chart 2 開發，用于GWT 應用的開源圖表制作組件。

Web 開發中，主要使用下面兩個文件，

open-flash-chart.swf: Flash 文件接口，通過該文件來生成 Flash 文件，備頁面調用(在 web 目錄下，與 WEB-INF 目錄并級)。

swfobject.js: Flash 文件依賴的 JS 文件(在 web 目錄下，與 WEB-INF 目錄并級)。

調用 open-flash-chart.swf

首先在頁面中編寫 script 腳本,保存頁面為 chart.html。

清單 1. chart.html

Hello World

   <div id="my_chart"></div>

</pre></td> </tr> </tbody> </table>

編寫 JSON 數據

其次，編寫圖表的 JSON 文本，將該文本保存為 data.json, 放在與 chart.html 同一個目錄下。

清單 2. JSON 數據樣本

{ "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>

OFC圖表展示

在瀏覽器地址欄輸入URL，比如：http://localhost:8080/chart/chart.html?ofc=data.json, 就可以看到的圖表效果。

圖 2. Web 圖表效果
在 Eclipse RCP 中運用 Open Flash Chart 展現圖表

在 Eclipse RCP 中使用 Open Flash Chart

目前，有許多應用的 GUI 是基于 Eclipse RCP 或者 SWT 開發的。但是 OFC 這樣強大的圖形報表工具還沒有出現在 Eclipse RCP 應用中。在這些應用中也需要繪制圖形報表，需要 Open Flash Chart 這樣的工具來實現很好的圖形效果。

Open Flash Chart 2 在 Eclipse RCP 中的使用很簡單。在 SWT 組件中，通過 Flash 播放器來播放 open-flash-chart.swf，然后再加載圖表的 JSON 格式數據即可。

在 RCP 中播放 Open Flash Chart

要使用 Open Flash Chart，我們需要播放 open-flash-chart.swf 這個文件。在 Window 平臺，我們使用包 org.eclipse.swt.ole.win32 提供的 Ole 組件來實現 Flash 的播放。

注冊 Flash 組件

首先創建一個 OleFrame 對象來作為容納 Ole 對象的容器，然后再創建一個 Flash 類型的 Ole對象。"ShockwaveFlash.ShockwaveFlash" 為 Macromedia Flash 的 ShockwaveFlash 控件在 Windows 平臺上的唯一標識符，程序將自動使用當前控件的最新版本。打開 Windows 注冊表,在注冊表中可以找到 HKEY_CLASSES_ROOT\ShockwaveFlash.ShockwaveFlash 相關項及對應版本。

清單 3. 注冊Flash組件

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);  //定義為顯示控件

通過 OleAutomation 來調用注冊組件

對 Active X 控件的操作通過 OleAutomation 對象來實現，并通過 automation.getIDsOfNames()來得到控件方法對應的 id 值。借助 OleView.exe 工具，可以查看 ActiveX 控件的方法。

清單 4. 調用注冊的 Flash 組件

final OleAutomation automation = new OleAutomation(controlSite);
int[] methodIDs = automation.getIDsOfNames(new String[] { "LoadMovie" });

加載 JSON 文件

通過 automation.invoke(int, Variant[]) 來調用 Active X 控件的方法。其中的 int 參數表示要調用的 Active X 控件的方法的 ID，Variant[] 參數就是要傳遞給 Active X 控件的方法的參數。

清單 5. 加載 JSON 文件，調用控件

Variant[] methodArgs = { 
    new Variant(0), new Variant(file+"?data-file=jsonfile.txt ") }; 
automation.invoke(methodIDs[0], methodArgs);

在清單5中，String file 是 open-flash-chart.swf 的絕對路徑，jsonfile.txt 是需要加載的 JSON 數據的文件路徑。

圖表數據文件的生成

要通過 Open Flash Chart 來繪制圖表，需要生成圖表對應的 JSON 數據文件。我們使用 Json Tools 來對 JSON 進行處理。

使用 JSON Tools

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，基于 ECMAScript 標準中對ObjectLiteral 的定義 (ECMA-262, 11.1.5)，通過一組鍵值對來定義一個對象。可以用 JSON 來描述一個圖表，然后通過 Open Flash Chart 加載 JSON 數據持久化后的文本文本，就能展示這個圖表。

JSON Tools 采用 Java 面向對象的方法對 JSON 的處理進行了封裝。使用 JSON Tools 封裝的API，可以很方便的對 JSON 格式的文本進行操作，進行 JSON 文本到 java 對象之間的相互轉換。利用 JSON Tools，即使對 JSON 不是很了解的開發人員，也能很容易的構造出想要的 JSON 格式文本。在 http://developer.berlios.de/projects/jsontools/ 可以下載到 JSON Tools.

Chart 模型的設計

我們根據 Chart 需要支持的相關屬性來設計 Chart 的模型。依賴于 JSON Tools，采用策略模式進行 Chart 模型和 JSON 對象間的轉換。下面是簡單的設計類圖。

圖 3. Chart 模型設計類圖
在 Eclipse RCP 中運用 Open Flash Chart 展現圖表

各種不同類型的 Chart 需要繼承和擴展 Element 來實現。通過 Chart 模型，使用面向對象的編程方法，只需調用 ChartData 里的 buildJSON 方法就可以構建展示 Flash 圖表所需要的 JSON 格式的文本文件。

buildJSON 方法是從 Chart 模型到 JSON 對象轉換的橋梁，這個方法中，根據 Chart 的屬性和 JSON 文本的映射關系進行轉換。這里給出 AbstractAxis 中的 buildJSON 方法：

清單 6. buildJSON 方法

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

JFreeChart，BIRT Chart 和 Open Flash Chart 比較

JFreeChart，BIRT Chart 和 Open Flash Chart 是3種應用較多的圖表繪制工具。這三種工具各有自身的優勢。為了更好的對這3中圖表繪制工具進行比較，我們基于 RCP 實現了這3種繪制工具對比的示例，下圖給出了 Bar Chart 和 Area Chart 兩種類型 chart 的對比。

圖 4. 三種 Charts 對比示例
在 Eclipse RCP 中運用 Open Flash Chart 展現圖表

JFreeChart 是一種基于 JAVA 語言的圖表開發技術。 JFreeChart 可用于 Servlet，JSP，applet，Java Appication 環境中。 JFeeChart 中有 DataSet 這個數據集對象，提供了很強的數據處理的功能，并且還能對已經生成的圖形進行調整和配置操作。

BIRT Chart 是基于 Eclipse 的開源報表工具。BIRT 可以產生 PNG, JPG, BMP, SVG 格式的圖形，使得圖形的使用范圍很廣泛。另外，BIRT 有很強的數據訪問的功能，提供了 JDBC, XML, Web Services 和 Flat File 數據源處理的支持。

Open Flash Chart 是 Flash 圖形報表工具。它最大的特點就是使用簡單，圖形美觀，擁有很好的動態效果。對于 OFC2，它只需加載一個圖形對應的 JSON 格式文本，就能在 Flash 中展示圖形報表，可以通過修改 JSON 文本來改變圖形的數據和展現效果。

表 1. 三種 charts 比較

Name	License	Latest Version	OSSC Review Level 1 in IBM
JFreeChart	LGPL	1.0.11	No
BIRT Chart	Eclipse Public License 1.0	2.3.1	Yes
Open Flash Chart	LGPL	2	No