這個系列的文章是open flash chart官網上面的教程。
因爲我最近要做一個監控系統,所以用了open flash chart(以下簡稱ofc)這個flash畫圖工具來畫一些圖表。按照它官網上面的教程一步一步做下來以後,我發現這個東西很好用,所以把它的官網教程翻譯過來,推薦給大家。
原文地址:http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php
教程一:它是怎麼工作的
在這個教程裏面我們要告訴大家如何在你的網頁上面顯示這樣的一張圖表。
這裏我截了一張圖片示意一下,真正的圖表是鼠標移上去有交互的。
1:安裝ofc
在我們開始之前,你應該先下載ofc的壓縮包。
下載地址在這裏:http://teethgrinder.co.uk/open-flash-chart-2/downloads.php,下載裏面的zip壓縮包。
解壓.zip文件,進入version-2目錄,把open-flash-chart.swf這個文件複製到你的web目錄的根目錄下(其實任何目錄都是可以的,只要你在使用的時候寫對路徑,但是這裏我們爲了方便,就放到根目錄好了)。
2:開始編碼
在你的web根目錄下新建一個chart.html文件,並把以下代碼複製進去。
現在你打開這個頁面的時候,會看到這樣的內容:例子1 它可能會包含一個錯誤。
因爲這個時候我們只告訴它要顯示一個ofc圖表,但是還沒有把要顯示什麼數據告訴它。
3:數據
下面我們要給它提供一些數據。ofc讀取的是json格式的數據,json大家應該都知道吧,沒有也麼關係,你只要把下面這段代碼複製到一個新文件中去,並命名爲data.json,同樣保存到web根目錄中。
ofc可以有好多方法去獲取數據,其中一種方式是url,就是通過鏈接告訴它去那裏取數據。
現在通過瀏覽器打開剛纔的chart.html,給它加上一個參數,“?ofc=data.json”,這個時候你的鏈接應該看起來像這樣:http://example.com/chart.html?ofc=data.json
你應該能看到類似這樣的一個圖表:例子2
4:恭喜你,你已經成功了。
看,就是這麼簡單。這樣就搞定了一個最簡單的圖表顯示了。
你可以嘗試編輯data.json文件來顯示你自己的數據,編輯 "values" : [9,6,7,9,5,7,6,9,7] 這部分就可以了。
你會發現手動編輯這樣的數據格式及其容易出錯,所以在教程3裏面我們會用php的api來寫json格式的數據。
5:一些需要注意的地方
- url裏面的ofc參數並不是唯一的,它可以和該頁面的其他參數一起和諧共處。比如這樣也行:http://example.com/chart.html?x=1&ofc=data.json&y=2
- 你可以把data.json文件放到web目錄的其他地方,然後在url裏面指定路徑即可。比如這樣:http://example.com/chart.html?ofc=../stuff/../data.json
- 作爲參數的路徑和文件名都要經過url編碼(url encode)。
簡單概括一下它做了哪些事情:
- 瀏覽器請求chart.html文件
- 它發現了falsh tag,然後去請求open-flash-chart.swf這flash文件。
- ofc發現url裏面指定的數據文件,並去讀取數據。
- ofc讀取json格式的數據,並把數據顯示出來。