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 發表在 痞客邦 PIXNET 留言(11) 人氣()


留言列表 (11)

發表留言
  • 遇到瓶頸
  • 不懂

    我跟著你的步驟下去做,但是我的畫面只會出現這樣
    {"elements":[{"type":"bar","values":[1,2,3,4,5,6,7,8,9]}],
    "title":{"text":"Sat Dec 05 2009"}}
    並不會出現圖表,可以請你幫我解惑嗎?
  • 你可以把你的程式碼丟出來給我看看, 因為這是一年多前寫得文章, 我也要再查看一下程式有沒有變化。

    andreli 於 2009/12/05 15:08 回覆

  • 遇到瓶頸
  • 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();

    ?>
  • 現在官方有出新的tutorial, 你有試過了嗎?
    因為我剛剛跟著試可以OK, 你可以試試改改看。
    http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php

    andreli 於 2009/12/05 22:23 回覆

  • 遇到瓶頸
  • 我剛剛試了tutorial一下,有成功顯示圖片了
    謝謝
    我會再做做看
  • 遇到瓶頸
  • 您好,我又遇到瓶頸了
    想麻煩您幫我看看
    http://teethgrinder.co.uk/open-flash-chart-2/tutorial-3.php
    我做到這個步驟發現
    我將程式碼貼入後,將網頁路徑後的?ofc=data.json給拿掉後
    網頁重整就出現
    Open Flash Chart
    IO ERROR
    Loading test data
    Error #2032

    This is the URL that I tried to open:chart-3.php

    這樣的畫面 可以勞煩您幫我解惑嗎 謝謝
  • 看看我文章中的第四點, 那就是這個project帶入資料檔的方法,你要把資料檔存成json之後用get的方法帶入php裡面.

    你也可以看他範例中的原始碼, 有另一個直接帶入資料檔方法的參數data-file.

    andreli 於 2009/12/08 09:55 回覆

  • 遇到瓶頸
  • 我想請問您 這有辦法說一個頁面顯示兩張圖嗎?
  • 照理來說可以, 你參照你自己貼的tutorial網址, 看他的sample原始檔自己修改看看應該就ok了, 擺兩個flash和傳進兩個資料檔, 應該不成問題。

    我看了一下, tutorial裡面也有你的需求, 看一下吧:
    http://teethgrinder.co.uk/open-flash-chart-2/tutorial-2-charts.php

    如果是在同一個頁面, 同一個flash裡面出現兩個圖表...這就要再研究看看了...

    andreli 於 2009/12/08 20:38 回覆

  • 遇到瓶頸
  • 他範例裡的那種我做不出來= =
    我都是用?ofc=data.json這種方法帶入
    我在data.json裡放兩張圖,顯示出來的是兩張圖數據都一模一樣

    您的第四點裡提到說這是用外接資料檔的方式連接
    我想請問說那不用外接資料檔 該怎麼做呢
    我照著http://teethgrinder.co.uk/open-flash-chart-2/tutorial-3.php
    將Code: 裡的程式碼 複製進chart.php
    然後照他說從網址列裡把?ofc=data.json拿掉
    但是這樣就沒辦法顯示圖片,
    會變成
    Open Flash Chart
    IO ERROR
    Loading test data
    Error #2032
    This is the URL that I tried to open:chart-3.php
    這是不是說我資料沒帶入的意思?
    可是我只會做到這樣,我不知道該如何帶入資料
  • 我說的是下面這段程式碼, 複製後更改data-file後面的參數,
    那邊改成你的資料檔案位置不行嗎? 如果你試過還是不行, 要等我手邊的事情忙完才可能幫忙了...

    資料檔案記得使用JSON格式, 相關檔案都要include到。


    andreli 於 2009/12/09 13:45 回覆

  • 遇到瓶頸
  • 感謝,我剛剛已經可以用了
    謝謝您的幫助
  • 不客氣, 成功就好。

    andreli 於 2009/12/09 20:54 回覆

  • 遇到瓶頸
  • 您好,我想問個問題我的資料是
    {
    "title":{
    "text": "<?echo $xx;?>月份良品數報表",
    "style": "{font-size: 40px; color:#0000ff; font-family: Verdana; text-align: center;}"
    },

    "y_legend":{
    "text": "",
    "style": "{color: #736AFF; font-size: 12px;}"
    },

    "elements":[
    {
    "type": "bar",
    "alpha": 0.5,
    "colour": "#9933CC",
    "font-size": 10,
    "values" : [<?echo $a1;?>,<?echo $a2;?>,<?echo $a3;?>]
    }
    ],
    "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {"size":30,
    "labels": ["不良數","投入數","良品數"]
    }
    },
    "y_axis":{
    "stroke": 4,
    "tick_length": 3,
    "colour": "#d000d0",
    "grid_colour": "#00ff00",
    "offset": 0,
    "labels": {"size":30},
    "max": <?$a5=round((($a2/1000)*1.2),0); echo $a5*1000;?>
    }
    }
    如果說我想要把投入數、良品數、不良數這三個bar各顯示一種顏色,請問有辦法辦到嗎?
  • 可以的, 也不會很難,
    請看http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php
    重點是JSON, JSON, JSON。

    andreli 於 2009/12/16 19:29 回覆

  • 遇到瓶頸
  • 如果用您第二步驟來做的話,範例是亂數產生數值,那麼我想改由資料庫讀取又該怎麼做呢?
    我上他的官方網站看過,不過我看不懂..= =
  • 上網google一下JSON格式, 把資料檔echo出來用成JSON格式應該就可以了。

    最近專案在趕, 可能沒辦法直接給你魚吃, 再努力google一下或看看書吧。

    andreli 於 2009/12/16 19:30 回覆

  • 123
  • 讚啊
  • 訪客
  • 這個可以在mysql的資料庫中 抓資料出來 製作圓餅圖嗎?
【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消