|
|
Posted on 2010-01-20 09:14 瘋狂 閱讀(1234) 評論(0) 編輯 收藏 所屬分類: java 、 chart
1:配置Open-Flash-Chart
開始之前,我們必須先下載一個Open Flash Chart 壓縮文件. Click Down
解壓.zip文件,在version-2文件夾里的把open-flash-chart.swf復(fù)制到你的站點根目錄
你可以把所有文件移到你的站點上任何目錄下,但為了保持本教程的完整和簡單,現(xiàn)在不必移動全部文件到站點里.當(dāng)你學(xué)完這個教程并且例子代碼都能運行時,可以把文件移到到你指定的目錄下.如果例子運行出錯,你應(yīng)該清楚知道你移動過的文件并且修改相關(guān)的文件路徑引用
2:代碼:
現(xiàn)在讓我們開始編寫代碼!
新建一個HTML文件,我們將運行一個”Hello World”例子.復(fù)制下面的代碼到文件里,并保存文件名為”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>
現(xiàn)在打開瀏覽這個頁面
Open Flash Chart會查找圖表數(shù)據(jù)源,但是我們沒有創(chuàng)建數(shù)據(jù)文件,所以它不能找到數(shù)據(jù)源并且給出一個錯誤信息.正如你所看到的:
<object>和<embed>標(biāo)簽來告訴瀏覽器來顯示一個Flash影片.只要Open Flash Chart 影片名在這兩個標(biāo)簽里,瀏覽器就能下載并且顯示它.
(聲明:之所以我們使用這兩個標(biāo)簽是因為只適用于IE瀏覽器而其他瀏覽器使用其他標(biāo)簽)
3:數(shù)據(jù)源
下一步我們需要提供一些數(shù)據(jù).Open Flash Chart讀取的是JSON數(shù)據(jù),如果你從未聽過JSON,不必擔(dān)心它很簡單易學(xué).JSON是一種數(shù)據(jù)格式的命名,這里有一個簡單的JSON圖表數(shù)據(jù):
- {
- "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數(shù)據(jù)不應(yīng)該手工輸入(稍后我們讓后臺程序來完成JSON數(shù)據(jù)生成),這很容易輸錯.
下一步,我們將上面的JSON數(shù)據(jù)復(fù)制到文件里并保存到根目錄命名為”data.json”
Open Flash Chart 能以URL的get形式獲取數(shù)據(jù)源,它的變量是”ofc”值為JSON數(shù)據(jù)源的名字.現(xiàn)在你的數(shù)據(jù)文件保存在根目錄名為data.json
在瀏覽你的網(wǎng)頁,仍然會提示出錯.你只要在網(wǎng)頁后添加參數(shù)?ofc=data.json
4.祝賀
你成功了!
你編輯剛才data.json文件,另存為’data-2.json’,修改里面"values" : [9,6,7,9,5,7,6,9,7]內(nèi)的數(shù)值來改變顯示.里面數(shù)據(jù)改變后瀏覽一下(http://example.com/chart.html?ofc=data-2.json)注意ofc變量參數(shù)為data-2.json.手工更改JSON內(nèi)容是很容易輸錯的方法,另一種方法是在教程3里我們將用PHP的類庫來生成JSON格式文件
5.后記
注意:
*ofc變量不單只有它一個參數(shù)還可以有多個其他變量參數(shù)
如: http://example.com/chart.html?x=1&ofc=data.json&y=2 都能正常執(zhí)行
*你可以把JSON文件保存到站點下任何目錄并且要用完整路徑指定ofc變量
如: http://example.com/chart.html?ofc=../stuff/../data.json
*路徑和文件名必須是URL編碼.當(dāng)你輸入URL時,沒有按URL編碼會出現(xiàn)問題
回顧一下剛才我們所做的:
1. 在站點根目錄里創(chuàng)建一個chart.html文件
2. chart.html內(nèi)的Flash兩個標(biāo)簽和復(fù)制一個Open Flash Chart 的應(yīng)用程序(open-flash-chart.swf)到根目錄
3. 創(chuàng)建Open Flash Chart 所需的JSON數(shù)據(jù)文件
4. Open Flash Chart 讀取JSON數(shù)據(jù)文件,顯示相應(yīng)的圖表(?ofc=data.json)
你應(yīng)該做出來了!覺得如何?好的話我就繼續(xù)為剩余教程繼續(xù)編譯!
|