PHP實現動態產生餅狀圖、柱狀圖和折線圖

簡介：這是PHP實現動態產生餅狀圖、柱狀圖和折線圖（轉）的詳細頁面，介紹了和php,php, gd PHP實現動態產生餅狀圖、柱狀圖和折線圖（轉）有關的知識、技巧、經驗，和一些php源碼等。

class='pingjiaF' frameborder='0' src='http://biancheng.dnbcw.info/pingjia.php?id=347699' scrolling='no'>
PHP在映像操作方面的表現非常出色，我們只需藉助可以免費得到的GD庫便可以輕鬆實現圖、表勾畫。下面將分別介紹PHP實現的餅狀圖、折線圖和柱狀圖以及他們的使用方法，這幾段代碼的特點就是不需要再把它們複製到你的代碼之中，只需要把計算得到的資料作為參數傳入，即可得到相應的圖形效果

代碼中所有使用的函數的說明，請參見php開發文檔

餅狀圖

設計思路

餅狀圖表對於查看一個值佔總值的百分比是一個好的方法。我們就用PHP來實現一個餅形圖表。

它的設計思想是：

1 接受參數，得到所有數值的和，得到每一個值占數值總和的比例。

2 根據比例計算每一個色塊在圖中的圓周角度

3 要產生立體效果，只需要用深顏色畫出陰影就可以了

實現過程

<?//參數以a為參數名傳入，a的文本形態應該是用“,”分割的若干數字串連的字串 //這裡首先判斷a是否存在if($_GET["a"]=="") die("0");//將得到的資料分解，存入數組$shuju中$shuju=split(",",$_GET["a"]);//再次判斷資料的合法性，返回錯誤碼if(count($shuju)==0) die("2");//定義整個圖形的寬度和高度 //讀者可以根據需要修改這兩個變數的值$tukuan=300;$tugao=150;//定義一個數組，用來存放每一個色塊的角度範圍$jiaodu = array();//定義存貯資料和的變數$total=0;//遍曆數組求和for ($i = 0; $i < count($shuju); $i++) {if(!is_numeric($shuju[$i])) die("1");$total+=$shuju[$i];}//再次遍曆，計算色塊角度並存入數組for ($i = 0; $i < count($shuju); $i++) {array_push ($jiaodu, round(360*$shuju[$i]/$total));}//建立映像$image = imagecreate($tukuan, $tugao);//定義一個灰色背景色,這個顏色其實就是大家很熟悉的頁面色系16進位數字表示的#EEEEEE$white = imagecolorallocate($image, 0xEE, 0xEE, 0xEE);//再定義10對深淺對應的彩色，存入二維數組$yanse = array(array(imagecolorallocate($image, 0x97, 0xbd, 0x00),imagecolorallocate($image, 0x00, 0x99, 0x00),imagecolorallocate($image, 0xcc, 0x33, 0x00),imagecolorallocate($image, 0xff, 0xcc, 0x00),imagecolorallocate($image, 0x33, 0x66, 0xcc),imagecolorallocate($image, 0x33, 0xcc, 0x33),imagecolorallocate($image, 0xff, 0x99, 0x33),imagecolorallocate($image, 0xcc, 0xcc, 0x99),imagecolorallocate($image, 0x99, 0xcc, 0x66),imagecolorallocate($image, 0x66, 0xff, 0x99)),array(imagecolorallocate($image, 0x4f, 0x66, 0x00),imagecolorallocate($image, 0x00, 0x33, 0x00),imagecolorallocate($image, 0x48, 0x10, 0x00),imagecolorallocate($image, 0x7d, 0x64, 0x00),imagecolorallocate($image, 0x17, 0x30, 0x64),imagecolorallocate($image, 0x1a, 0x6a, 0x1a),imagecolorallocate($image, 0x97, 0x4b, 0x00),imagecolorallocate($image, 0x78, 0x79, 0x3c),imagecolorallocate($image, 0x55, 0x7e, 0x27),imagecolorallocate($image, 0x00, 0x93, 0x37)));//由下至上畫10個像素高的深色餅圖，作為陰影$yuanxin_x=$tukuan/2;for ($h = $tugao/2+5; $h > $tugao/2-5; $h--) {$kaishi=0;$jieshu=0;for ($i = 0; $i < count($shuju); $i++) {$kaishi=$kaishi+0;$jieshu=$kaishi+$jiaodu[$i];$yanse_i=fmod($i,10);imagefilledarc($image,$yuanxin_x,$h,$tukuan,$tugao-20,$kaishi,$jieshu,$yanse[1][$yanse_i],IMG_ARC_PIE);$kaishi+=$jiaodu[$i];$jieshu+=$jiaodu[$i];}}//在最高處(也就是$h最小時)畫一個淺色餅圖，這個淺色圖跟先畫上的深色餅圖就能產生立體效果了for ($i = 0; $i < count($shuju); $i++) {$kaishi=$kaishi+0;$jieshu=$kaishi+$jiaodu[$i];$yanse_i=fmod($i,10);imagefilledarc($image, $yuanxin_x, $h, $tukuan, $tugao-20, $kaishi, $jieshu, $yanse[0][$yanse_i], IMG_ARC_PIE);$kaishi+=$jiaodu[$i];$jieshu+=$jiaodu[$i];}//設定檔案頭 header('Content-type: image/png');//輸出映像imagepng($image);//釋放資源 imagedestroy($image);?>

使用方法

在需要顯示映像的位置插入如下代碼

<img src="bing_img.php?a=3,2,3,4"/>

a的文字格式設定是由“,”串連的若干個資料的字串，get方式傳入。

折線圖

設計思路

用折線圖表查看某一資料在單位時段內的變化趨勢是一個好的選擇。我們就用PHP來實現一個動態折線圖表。

它的設計思想是：

1 接受參數，得到所有數值的和，得到資料的最大值以確定縱軸的最大刻度值

2 根據資料個數確定映像的寬度，並畫出橫軸和縱軸座標及刻度

3 畫直線串連各點，為每個點填充一個2*2的矩形，突出點的位置

4 在每個點的右上方標註每個點的資料值

實現過程

<?$img_gao=170;$img_kuan=0;$jiange=30;//橫座標點與點之間的間隔，產生的圖片寬度會根據傳入資料的多少而自動變化$zuo=20;//左側留空$you=20;//右側留空$shang=20;//上留空$xia=20;//下留空$zuidashujuzhi=1;$p_x = array();//點橫座標$p_y = array();//點縱座標$y_name=split(",",$_GET["x_name"]);if ($_GET["a"]=="") die("error id:0");$shuju=split(",",$_GET["a"]);//得到縱軸最大值for($i=0;$i<count($shuju);$i++){if(!is_numeric($shuju[$i])) die("error id:1");if($shuju[$i]>$zuidashujuzhi) $zuidashujuzhi=$shuju[$i];}//得到映像寬度 $img_kuan=$zuo+$you+count($shuju)*$jiange;//然後建立映像資源 $image = imagecreate($img_kuan,$img_gao);//灰色背景$white = imagecolorallocate($image, 0xEE, 0xEE, 0xEE);//座標軸用黑色顯示$zuobiao_yanse = imagecolorallocate($image, 0x00, 0x00, 0x00);//折線用藍色顯示$xian_yanse = imagecolorallocate($image, 0x00, 0x00, 0xFF);//畫座標//橫軸imageline ( $image, $zuo, $img_gao-$xia, $img_kuan-$you/2, $img_gao-$xia, $zuobiao_yanse);//縱軸imageline ( $image, $zuo, $shang/2, $zuo, $img_gao-$xia, $zuobiao_yanse);//得到每個點的座標for($i=0;$i<count($shuju);$i++){array_push ($p_x, $zuo+$i*$jiange);array_push ($p_y, $shang+round(($img_gao-$shang-$xia)*(1-$shuju[$i]/$zuidashujuzhi)));}//縱軸刻度imageline ( $image, $zuo, $shang, $zuo+6, $shang, $zuobiao_yanse);imagestring ( $image, 1, $zuo/4, $shang,$zuidashujuzhi, $zuobiao_yanse);imageline ( $image, $zuo, $shang+($img_gao-$shang-$xia)*1/4, $zuo+6, $shang+($img_gao-$shang-$xia)*1/4, $zuobiao_yanse);imagestring ( $image, 1, $zuo/4, $shang+($img_gao-$shang-$xia)*1/4,$zuidashujuzhi*3/4, $zuobiao_yanse);imageline ( $image, $zuo, $shang+($img_gao-$shang-$xia)*2/4, $zuo+6, $shang+($img_gao-$shang-$xia)*2/4, $zuobiao_yanse);imagestring ( $image, 1, $zuo/4, $shang+($img_gao-$shang-$xia)*2/4,$zuidashujuzhi*2/4, $zuobiao_yanse);imageline ( $image, $zuo, $shang+($img_gao-$shang-$xia)*3/4, $zuo+6, $shang+($img_gao-$shang-$xia)*3/4, $zuobiao_yanse);imagestring ( $image, 1, $zuo/4, $shang+($img_gao-$shang-$xia)*3/4,$zuidashujuzhi*1/4, $zuobiao_yanse);//橫軸刻度for($i=0;$i<count($shuju);$i++){imageline ( $image, $zuo+$i*$jiange, $img_gao-$xia, $zuo+$i*$jiange, $img_gao-$xia-6, $zuobiao_yanse);imagestring ( $image, 1, $zuo+$i*$jiange-$jiange/4, $shang+($img_gao-$shang-$xia)+2,$y_name[$i], $zuobiao_yanse);}//折線$shuju_yanse_int=0;for($i=0;$i<count($shuju);$i++){if($i+1<>count($shuju)){imageline ( $image, $p_x[$i], $p_y[$i], $p_x[$i+1], $p_y[$i+1], $xian_yanse);imagefilledrectangle($image, $p_x[$i]-1, $p_y[$i]-1, $p_x[$i]+1, $p_y[$i]+1, $xian_yanse);}}//上一個迴圈沒有畫出最後一個點效果，這裡還要追加imagefilledrectangle($image, $p_x[count($shuju)-1]-1, $p_y[count($shuju)-1]-1, $p_x[count($shuju)-1]+1, $p_y[count($shuju)-1]+1, $xian_yanse);//標註資料值for($i=0;$i<count($shuju);$i++){imagestring ( $image, 3, $p_x[$i]+4, $p_y[$i]-12,$shuju[$i], $zuobiao_yanse);}//設定檔案頭 header('Content-type: image/png');//輸出映像imagepng($image);//釋放資源 imagedestroy($image);?>

使用方法

在需要顯示映像的位置插入如下代碼

<img src="zhexian_img.php?a=5.4,2,30.2,4,0,6,7.7,3.8,2,3,4"/>

其中a的值由你自己計算得出

a的文字格式設定是由“,”串連的若干個資料的字串，get方式傳入。

由於往圖形裡寫入中文需要更多PHP環境配置，所以這裡給出一個html解決方案，實用也很靈活：

大家只需要根據資料個數的不同，動態產生一個表格放置橫軸座標刻度名稱就行了，像這樣

<table width="550" border="0" cellspacing="0" cellpadding="0"><tr align="center"> <?for($i=0;$i<12;$i++) {echo "<td width=\"30\">".$i."月</td>";}?></tr></table> 

柱狀圖

設計思路

還是要首先確定縱軸的刻度值，確定縱軸的刻度最大值

然後根據得到的資料個數確定映像的寬度，這時就可以建立映像了

計算每個色柱的高度，用高度可以計算出色柱的填充範圍

用直線畫出座標軸，標註刻度值

用矩形填充色柱，並在色柱上方標註資料值

用Html方式畫出需要的橫軸座標名稱

實現過程

<?$kuan=30;//色柱寬$jiange=20;//色柱間間隔$zuo=20;//左側留空$you=20;//右側留空$shang=20;//上留空$xia=10;//下留空$zuidashujuzhi=1;//初始化縱軸最大資料值if ($_GET["a"]=="") die("error id:0");$shuju=split(",",$_GET["a"]);//得到最大值for($i=0;$i<count($shuju);$i++){if(!is_numeric($shuju[$i])) die("error id:1");if($shuju[$i]>$zuidashujuzhi) $zuidashujuzhi=$shuju[$i];}//計算映像寬度 $img_kuan=$zuo+$you+$jiange+count($shuju)*($kuan+$jiange);//映像高 $img_gao=170;//儲存色柱高度的數組$zhugaodu = array();$image = imagecreate($img_kuan,$img_gao);$white = imagecolorallocate($image, 0xEE, 0xEE, 0xEE);//色柱顏色$shuju_yanse =array(imagecolorallocate($image, 0x97, 0xbd, 0x00),imagecolorallocate($image, 0x00, 0x99, 0x00),imagecolorallocate($image, 0xcc, 0x33, 0x00),imagecolorallocate($image, 0xff, 0xcc, 0x00),imagecolorallocate($image, 0x33, 0x66, 0xcc),imagecolorallocate($image, 0x33, 0xcc, 0x33),imagecolorallocate($image, 0xff, 0x99, 0x33),imagecolorallocate($image, 0xcc, 0xcc, 0x99),imagecolorallocate($image, 0x99, 0xcc, 0x66),imagecolorallocate($image, 0x66, 0xff, 0x99));//座標軸顏色$zuobiao_yanse = imagecolorallocate($image, 0x00, 0x00, 0x00);//橫軸imageline ( $image, $zuo, $img_gao-$xia, $img_kuan-$you/2, $img_gao-$xia, $zuobiao_yanse);//縱軸imageline ( $image, $zuo, $shang/2, $zuo, $img_gao-$xia, $zuobiao_yanse);//縱軸刻度，縱軸上共標註4個點，所以這裡分別計算即可imageline ( $image, $zuo, $shang, $zuo+6, $shang, $zuobiao_yanse);imagestring ( $image, 3, $zuo/4, $shang,round($zuidashujuzhi), $zuobiao_yanse);imageline ( $image, $zuo, $shang+($img_gao-$shang-$xia)*1/4, $zuo+6, round($shang+($img_gao-$shang-$xia)*1/4), $zuobiao_yanse);imagestring ( $image, 3, $zuo/4, $shang+($img_gao-$shang-$xia)*1/4,round($zuidashujuzhi*3/4), $zuobiao_yanse);imageline ( $image, $zuo, $shang+($img_gao-$shang-$xia)*2/4, $zuo+6, $shang+($img_gao-$shang-$xia)*2/4, $zuobiao_yanse);imagestring ( $image, 3, $zuo/4, $shang+($img_gao-$shang-$xia)*2/4,round($zuidashujuzhi*2/4), $zuobiao_yanse);imageline ( $image, $zuo, $shang+($img_gao-$shang-$xia)*3/4, $zuo+6, $shang+($img_gao-$shang-$xia)*3/4, $zuobiao_yanse);imagestring ( $image, 3, $zuo/4, $shang+($img_gao-$shang-$xia)*3/4,round($zuidashujuzhi*1/4), $zuobiao_yanse);//得到每個柱的高度for($i=0;$i<count($shuju);$i++){array_push ($zhugaodu, round(($img_gao-$shang-$xia)*$shuju[$i]/$zuidashujuzhi));}//畫資料柱$shuju_yanse_int=0;for($i=0;$i<count($shuju);$i++){imagefilledrectangle( $image,$zuo+$jiange+$i*($kuan+$jiange),$shang+($img_gao-$shang-$xia)-$zhugaodu[$i],$zuo+$jiange+$i*($kuan+$jiange)+$kuan,($img_gao-$xia)-1 ,$shuju_yanse[$shuju_yanse_int]);//因為只定義了10種顏色，所以這裡做一個迴圈　　if($shuju_yanse_int==9){$shuju_yanse_int=0;}else{$shuju_yanse_int++;}}//標註資料柱上方資料值for($i=0;$i<count($shuju);$i++){imagestring ( $image, 1, $zuo+$jiange+$i*($kuan+$jiange)+2,$shang+($img_gao-$shang-$xia)-$zhugaodu[$i]-10,$shuju[$i], $zuobiao_yanse);}header('Content-type: image/png');imagepng($image);imagedestroy($image);?>

使用方法

在需要顯示映像的位置插入如下代碼

<img src="zhu_img.php?a=5.4,2,30.2,4,0,6,7.7,3.8,2,3,4"/>

其中a的值由你自己計算得出

a的文字格式設定是由“,”串連的若干個資料的字串，get方式傳入。

同樣使用一個html解決方案，解決橫軸刻度名稱的問題：

根據資料個數的不同，動態產生一個表格放置橫軸座標刻度名稱就行了，像這樣

<table width="550" border="0" cellspacing="0" cellpadding="0"><tr align="center"> <?for($i=0;$i<12;$i++) {echo "<td width=\"50\">".$i."月</td>";}?></tr></table>

愛J2EE關注Java邁克爾傑克遜視頻站JSON線上工具

http://biancheng.dnbcw.info/php/347699.html pageNo:3