Open Flash Chart 應用 - 圓餅圖 pie
很久沒有寫關於技術之類的文章了，
不是我沒有在玩新的東西，而是我很懶得寫文章。
但是這禮拜回家，因為努力的修改我的騙人遊戲程式，
於是我碰到了這個好東西，
一個開放的圖表程式、一個可以讓您的網站輕鬆生成美麗Flash圖表的強大程式。
可是網路上的資源就像莫非定律一樣的全部掛點，
所以我才決定自己跳下來寫了這篇文章
1.下載檔案與解壓縮
首先一開始請連結至Open Flash Chart官方發布網站，右上方任一選項下方都有Download的按紐，
點選後進入下載 Open Flash Chart version 2 Beta 1。
請將解壓縮至您網站的資料夾根目錄下，
本範例是教導如何與PHP結合，其他的參考範例請參閱官網中的Tutorial。
在實際的使用上，我只使用到：
DIR php-ofc-library
DIR js
open-flash-chart.swf
因此，往下走之前一定要確認有複製到這兩個資料夾外加一個swf檔。
2.新增一個data.php
這個檔案是傳給open-flash-chart.swf用的資料檔，
OFC的資料檔採用的是JSON的格式，底下的範例檔是官網中提供給PHP產生資料檔的範例，
請將下列程式碼複製後另存為一個data.php同樣置於網站根目錄下：
<?php
include '../php-ofc-library/open-flash-chart.php';
// generate some random data
srand((double)microtime()*1000000);
$max = 20;
$tmp = array();
for( $i=0; $i<9; $i++ )
{
$tmp[] = rand(0,$max);
}
$title = new title( date("D M d Y") );
$bar = new bar();
$bar->set_values( array(1,2,3,4,5,6,7,8,9) );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );
echo $chart->toString();
?>
3.要放圖表的主程式chart.php
下面同樣是來自官網的範例碼，請複製後另存成chart.php檔，同樣置於網站的根目錄下。
<html>
<head>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"chart-3.php"} );
</script>
</head>
<body>
<p>Hello World</p>
<div id="my_chart"></div>
<p>Don't forget to "view source"</p>
</body>
</html>
4.網址帶入資料檔就大功告成了！
由於這次使用的範例是用外接資料檔的方式連接OFC，
官網中也有提到不使用外接的方式使用，想進階研究的人請自行參閱。
只要在網址列輸入：http://你的網址/chart.php?ofc=data.php就可以使用OFC了!
如果你沒有帶入資料檔，也就是沒輸入?ofc=data.php，
原本畫面中顯示Flash的地方就會變成顯示這樣的畫面，Error #2032。
FAQ：
1. 我想要圓餅圖怎麼辦?
官網中有各式各樣的範例可供參考，只要將範例抓下來改成data.php來生成資料檔玩玩看就會知道囉!
2. 那些物件名稱要到哪裡看啊?
新版Version 2的Open Flash Chart支援PHP5的物件導向設計，在Chart裡有詳細的介紹各個圖表中物件的名稱與使用方法，在Chart Elements裡也有詳細介紹其餘的物件名稱與使用方法，稍微閱讀一下應該就會了。
3.我的中文顯示不出來?!
Open Flash Chart支援unicode的資料輸入，所以如果你使用big5的語系，請轉成utf-8進行輸入，PHP可以使用：
big5 -> utf-8
$str = iconv("big5","utf-8",$str);
大致上就先打到這邊，如果這篇文章對您有益或是還有任何問題，歡迎留下回應，轉載請註明出處，謝謝。
留言列表
吃喝玩樂 (11)
