這個函式庫同時也支援其它語言如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
沒有留言:
張貼留言