OFC2 - 第一個範例
The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu
請勿轉貼
我們假設你已經依據之前的文章完成的 OFC2 的安裝工作，也已經把 ofc0.html 以及 data.json 放在適當的目錄下。 在本文中，我們開始說明第一個範例的內容：
- 由於在資訊系統中，資料的內容常常會因為資料庫的內容改變而不同，因此 系統開發時撰寫一份固定的資料檔（也就是範例中的 data.json）是沒什麼道理的。 一般來說，data.json 的內容會由程式產生，在我們的教學文件中，這些資料是由 JSPs/servlets 來產生。除非讀者有意願開發一套類似 JOFC2 的套件，大多數開發 人員是不需要知道 data.json 的內容的。
- 就像之前說明的，OFC2 是利用 open-flash-chart.swf 來讀取資料並將結果
呈現在網頁中的，所以需要呈現 OFC2 圖表的網頁必須要有一個機制將該 swf 檔
下載到瀏覽器；這個部分還蠻簡單的，因為 OFC2 的作者利用了一個 Javascript
檔（就是下列原始碼中的 swfobject.js）讓這個過程變的非常簡單。載入並使用
swfobject.js 的方式如下原始碼的綠色部分：在這段程式碼中，總共有兩段
<script>，第一段幾乎不必改變，可能需要改變以及說明的在第二段；
這兩段 <script> 習慣上會置放於 <head> 標籤之間。在第二段
<script> 中，我們呼叫了 swfobject.embedSWF() 方法（定義於
swfobject.js 內），該方法共有五個參數，第一個參數用來載入 open-flash-chart.swf
（這個部分大多不會變，除非你將該檔置放於其他位置），第二個參數在指出該
圖表出現的地方；以我們這個範例來說，圖表會出現在一個 id 為 my_chart 的
標籤內，也就是如原始碼紅色的部分所示。
第三和第四個參數分別代表該圖表的 X 軸和 Y 軸的長度，以本範例來說，該圖表的 大小為 500x250 的方形；最後一個參數代表 Flash 的版本數，從這裡看得出來， open-flash-chart.swf 是以 Flash 9 版所寫出來的。
<html> <head> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("open-flash-chart.swf", "my_chart", "500", "250", "9.0.0"); </script> </head> <body> <p>第一個範例：使用 SWFObject.js</p> <div id="my_chart"></div> </body> </html> - 練習題： 請將 my_chart 改成 first_chart，另將大小改成 800x400，並試著將圖表置放於網頁的中央。
<html>
<head>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "500", "250", "9.0.0",
"expressInstall.swf", {"data-file":"data.json"}
);
</script>
</head>
<body>
<p>第一個範例：使用固定來源名稱</p>
<div id="my_chart"></div>
</body>
</html>
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu
沒有留言:
張貼留言