openflash

咖啡妝 — Wed, 20 Jan 2010 01:14:00 GMT

1:配置Open-Flash-Chart
開始之前,我們必須先下載一個Open Flash Chart 壓縮文件. Click Down

解壓.zip文件,在version-2文件夾里的把open-flash-chart.swf復(fù)制到你的站點(diǎn)根目錄

你可以把所有文件移到你的站點(diǎn)上任何目錄下,但為了保持本教程的完整和簡單,現(xiàn)在不必移動全部文件到站點(diǎn)里.當(dāng)你學(xué)完這個教程并且例子代碼都能運(yùn)行時,可以把文件移到到你指定的目錄下.如果例子運(yùn)行出錯,你應(yīng)該清楚知道你移動過的文件并且修改相關(guān)的文件路徑引用

2:代碼:
現(xiàn)在讓我們開始編寫代碼!
新建一個HTML文件,我們將運(yùn)行一個”Hello World”例子.復(fù)制下面的代碼到文件里,并保存文件名為”chart.html”在站點(diǎn)根目錄:

Open Flash Chart
Hello World
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">

現(xiàn)在打開瀏覽這個頁面
Open Flash Chart會查找圖表數(shù)據(jù)源,但是我們沒有創(chuàng)建數(shù)據(jù)文件,所以它不能找到數(shù)據(jù)源并且給出一個錯誤信息.正如你所看到的:

和標(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,不必?fù)?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文件保存到站點(diǎn)下任何目錄并且要用完整路徑指定ofc變量
        如: http://example.com/chart.html?ofc=../stuff/../data.json
       *路徑和文件名必須是URL編碼.當(dāng)你輸入URL時,沒有按URL編碼會出現(xiàn)問題
回顧一下剛才我們所做的:
       1. 在站點(diǎn)根目錄里創(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ù)編譯!

咖啡妝 2010-01-20 09:14 發(fā)表評論

亚洲欧美在线成人,黄色成年人视频在线观看,av在线一区二区

openflash