歡迎您光臨本站 註冊首頁

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

←手機掃碼閱讀     火星人 @ 2014-03-12 , reply:0
  
Open Flash Chart(OFC) 是一個開源的 Flash 圖表繪製工具。本文主要介紹如何在 Eclipse RCP 中使用 OFC 更好的展示圖表。在文章的最後,對 JFreeChart 、BIRT Chart 、OFC 三種圖表工具做了比較。

Open Flash Chart 簡介

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 部分樣式的示例圖





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
<html>  <head>    <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>     </head>  <body>  <p>Hello World</p>  <div id="my_chart"></div>  </body>  </html>  

編寫 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    }  }  

OFC圖表展示

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


圖 2. Web 圖表效果





在 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 的播放。

  1. 註冊 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);	//定義為顯示控制項  

  1. 通過 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" });  

  1. 載入 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 進行處理。

  1. 使用 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.

  1. Chart 模型的設計

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


圖 3. 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 對比示例

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

(責任編輯:A6)


[火星人 ] 在 Eclipse RCP 中運用 Open Flash Chart 展現圖表已經有894次圍觀

http://coctec.com/docs/linux/show-post-68958.html