Open Flash Chart 簡介

http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-ofc/ 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 部分樣式的示例圖 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 圖表效果  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 模型設計類圖 各類不一樣類型的 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 對比示例 三種 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
參考資料
相關文章
相關標籤/搜索