|
|
Posted on 2010-01-20 09:14 瘋狂 閱讀(1228) 評論(0) 編輯 收藏 所屬分類: java 、 chart
1:配置Open-Flash-Chart
開始之前,我們必須先下載一個Open Flash Chart 壓縮文件. Click Down
解壓.zip文件,在version-2文件夾里的把open-flash-chart.swf復制到你的站點根目錄
你可以把所有文件移到你的站點上任何目錄下,但為了保持本教程的完整和簡單,現在不必移動全部文件到站點里.當你學完這個教程并且例子代碼都能運行時,可以把文件移到到你指定的目錄下.如果例子運行出錯,你應該清楚知道你移動過的文件并且修改相關的文件路徑引用
2:代碼:
現在讓我們開始編寫代碼!
新建一個HTML文件,我們將運行一個”Hello World”例子.復制下面的代碼到文件里,并保存文件名為”chart.html”在站點根目錄:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Open Flash Chart</title>
- </head>
- <body>
- <p>Hello World</p>
- <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
- codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
- width="500" height="250" id="graph-2" align="middle">
- <param name="allowScriptAccess" value="sameDomain" />
- <param name="movie" value="open-flash-chart.swf" />
- <param name="quality" value="high" />
- <embed src="open-flash-chart.swf" quality="high" bgcolor="#FFFFFF" width="500" height="250" name="open-flash-chart" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
- </object>
- </body>
- </html>
現在打開瀏覽這個頁面
Open Flash Chart會查找圖表數據源,但是我們沒有創建數據文件,所以它不能找到數據源并且給出一個錯誤信息.正如你所看到的:
<object>和<embed>標簽來告訴瀏覽器來顯示一個Flash影片.只要Open Flash Chart 影片名在這兩個標簽里,瀏覽器就能下載并且顯示它.
(聲明:之所以我們使用這兩個標簽是因為只適用于IE瀏覽器而其他瀏覽器使用其他標簽)
3:數據源
下一步我們需要提供一些數據.Open Flash Chart讀取的是JSON數據,如果你從未聽過JSON,不必擔心它很簡單易學.JSON是一種數據格式的命名,這里有一個簡單的JSON圖表數據:
- {
- "title":{
- "text": "Yedeer sale lines",
- "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
- },
-
- "y_legend":{
- "text": "Yedeer Chart",
- "style": "{color: #736AFF; font-size: 12px;}"
- },
-
- "elements":[
- {
- "type": "bar_glass",
- "alpha": 0.8,
- "colour": "#9933CC",
- "text": "Page views",
- "font-size": 10,
- "values" : [9,6,7,9,5,7,6,9,7]
- },
- {
- "type": "bar_glass",
- "alpha": 0.8,
- "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": 15
- }
- }
JSON數據不應該手工輸入(稍后我們讓后臺程序來完成JSON數據生成),這很容易輸錯.
下一步,我們將上面的JSON數據復制到文件里并保存到根目錄命名為”data.json”
Open Flash Chart 能以URL的get形式獲取數據源,它的變量是”ofc”值為JSON數據源的名字.現在你的數據文件保存在根目錄名為data.json
在瀏覽你的網頁,仍然會提示出錯.你只要在網頁后添加參數?ofc=data.json
4.祝賀
你成功了!
你編輯剛才data.json文件,另存為’data-2.json’,修改里面"values" : [9,6,7,9,5,7,6,9,7]內的數值來改變顯示.里面數據改變后瀏覽一下(http://example.com/chart.html?ofc=data-2.json)注意ofc變量參數為data-2.json.手工更改JSON內容是很容易輸錯的方法,另一種方法是在教程3里我們將用PHP的類庫來生成JSON格式文件
5.后記
注意:
*ofc變量不單只有它一個參數還可以有多個其他變量參數
如: http://example.com/chart.html?x=1&ofc=data.json&y=2 都能正常執行
*你可以把JSON文件保存到站點下任何目錄并且要用完整路徑指定ofc變量
如: http://example.com/chart.html?ofc=../stuff/../data.json
*路徑和文件名必須是URL編碼.當你輸入URL時,沒有按URL編碼會出現問題
回顧一下剛才我們所做的:
1. 在站點根目錄里創建一個chart.html文件
2. chart.html內的Flash兩個標簽和復制一個Open Flash Chart 的應用程序(open-flash-chart.swf)到根目錄
3. 創建Open Flash Chart 所需的JSON數據文件
4. Open Flash Chart 讀取JSON數據文件,顯示相應的圖表(?ofc=data.json)
你應該做出來了!覺得如何?好的話我就繼續為剩余教程繼續編譯!
|