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 titledate("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);

大致上就先打到這邊,如果這篇文章對您有益或是還有任何問題,歡迎留下回應,轉載請註明出處,謝謝。

andreli 發表在 痞客邦 留言(11) 人氣()