2010年10月9日 星期六

[PHP]-Open Flash Chart2

接下來介紹好用的php chart圖工具open flash chart2,
這個函式庫同時也支援其它語言如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

沒有留言:

張貼留言