這個函式庫同時也支援其它語言如Ruby, Perl, Python, .NET and Java等。
首先下載open flash chart2的函式庫壓縮檔:
Open Flash Chart Version 2 Lug Wyrm Charmer
解壓縮後將目錄內的open-flash-chart.swf檔及js、php-ofc-library兩個
目錄copy到網站根目錄下。
要在html中顯示chart圖有兩個步驟:
1.在head標韱中加入這兩個javascript
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "500", "500", "9.0.0");
</script>
2.利用div指定與swfobject相同參數名稱的id來擺放chart圖位置<div id="my_chart">
上述動作只是準備好chart圖的位置而已,
接下來要透個php產生json格式資料檔做為chart圖的資料來源,
(也能另外準備純json格式的檔案透過網址傳遞給chart)
下面是以radar圖為例:
<?php
// prepare radar chart
include 'php-ofc-library/open-flash-chart.php';
include 'php-ofc-library/ofc_sugar.php';
$chart = new open_flash_chart();
$area = new area();
// set the circle line width:
$area->set_width( 1 );
$area->set_default_dot_style( new s_hollow_dot('#45909F', 5) );
$area->set_colour( '#45909F' );
$area->set_fill_colour( '#45909F' );
$area->set_fill_alpha( 0.4 );
$area->set_loop();
$area->set_values(array(8,3,6,3.4,7));
// add the area object to the chart:
$chart->add_element($area);
$r = new radar_axis(10);
$r->set_colour( '#EFD1EF' );
$r->set_grid_colour( '#EFD1EF' );
$labels = new radar_axis_labels(
array('0','1','2','3','4','5','6','7','8','9','10') );
$labels->set_colour( '#9F819F' );
$r->set_labels( $labels );
$spoke_labels = new radar_spoke_labels(
array(
'1.外部環境品質',
'2.內部環境品質',
'3.服務作業SOP',
'4.人員服務態度',
'5.附加價值與設備') );
$spoke_labels->set_colour( '#9F819F' );
$r->set_spoke_labels( $spoke_labels );
$chart->set_radar_axis( $r );
$tooltip = new tooltip();
$tooltip->set_proximity();
$chart->set_tooltip( $tooltip );
$chart->set_bg_colour( '#DFFFEC' );
?>
產生好的chart資料就存放在chart物件中,在官網中有說明其它傳遞json資料到
chart圖的方式,這裡我們是利用文件最後提及的利用javascript的方式來來傳遞,
要利用javascript傳遞藉由php所產生的json資料,必須在head標韱中另外加入
兩個javascript:
<script type="text/javascript" src="js/json/json2.js"></script>
<script type="text/javascript">
function ofc_ready()
{
alert('ofc_ready');
}
function open_flash_chart_data()
{
alert( 'reading data' );
return JSON.stringify(data);
}
function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
}
// JSON資料在這裡傳遞
var data = toPrettyString(); ?>;
</script>
最後是產生的chart圖:
官方參考文件:Open Flash Chart2

沒有留言:
張貼留言