如何使用PHP動態(tài)生成餅狀圖、柱狀圖和折線圖

hiziqin

序

PHP在圖像操作方面的表現(xiàn)非常出色，我們只需借助可以免費得到的GD庫便可以輕松實現(xiàn)圖、表勾畫。下面將分別介紹筆者實現(xiàn) 的餅狀圖、折線圖和柱狀圖以及他們的使用方法，這幾段代碼的特點就是不需要再把它們復制到你的代碼之中，只需要把計算得到的數(shù)據(jù)作為參數(shù)傳入，即可得到相 應的圖形效果

開發(fā)環(huán)境：PHP Version 4.3.6＋GD Version bundled (2.0.22 compatible)

由于作者水平有限，文章中難免存在錯誤，我將非常感激您的指正

代碼中所有使用的函數(shù)的說明，請參見 php開發(fā)文檔 點這里獲得最 新版

餅狀圖

設(shè)計思路

餅狀圖表對于查看一個值占總值的百分比是一個好的方法。我們就用PHP來 實現(xiàn)一個餅形圖表。
它的設(shè)計思想是：
1 接受參數(shù)，得到所有數(shù)值的和，得到每一個值占數(shù)值總和的比例。
2 根據(jù)比例計算每一個色塊在圖中的圓周角度
3 要產(chǎn)生立體效果，只需要用深顏色畫出陰影就可以了

實現(xiàn)過程

<?
//參數(shù)以a為參數(shù)名傳入，a的文本形態(tài) 應該是用“,”分割的若干數(shù)字連接的字符串
//這里首先判斷a是否存在
if($_GET["a"]=="") die("0");
// 將得到的數(shù)據(jù)分解，存入數(shù)組$shuju中
$shuju=split(",",$_GET["a"]);
//再次判斷數(shù)據(jù)的合法性，返回 錯誤代碼
if(count($shuju)==0) die("2");
//定義整個圖形的寬度和高度
//讀者可以根據(jù)需要修 改這兩個變量的值
$tukuan=300;
$tugao=150;

//定義一個數(shù)組，用來存放每一個色塊的角度范圍
$jiaodu = array();
//定義存貯數(shù)據(jù)和的變量
$total=0;
//遍歷數(shù)組求和
for ($i = 0; $i < count($shuju); $i++) {
　　if(!is_numeric($shuju[$i])) die("1");
　 　$total+=$shuju[$i];
}
//再次遍歷，計算色塊角度并存入數(shù)組
for ($i = 0; $i < count($shuju); $i++) {
　　array_push ($jiaodu, round(360*$shuju[$i]/$total));
}

//創(chuàng)建圖像
$image = imagecreate($tukuan, $tugao);
//定義一個灰色背景色,這個顏色其實就是大家很熟悉的頁面色系16進制數(shù)字表示 的#EEEEEE
$white = imagecolorallocate($image, 0xEE, 0xEE, 0xEE);

// 再定義10對深淺對應的彩色，存入二維數(shù)組
$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最小時)畫一個淺色餅圖，這個淺色圖跟先畫上的深色餅圖就能產(chǎn)生立體效果了
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];
}
//設(shè)定文件頭
header('Content-type: image/png');
//輸出圖像
imagepng($image);
//釋放資源
imagedestroy($image);
?>

使用方法

在需要顯示圖像的位置插入如下代碼
<img src="bing_img.php?a=3,2,3,4"/>
a的文本格式是由“,”連接的若干個數(shù)據(jù)的字符串，get方式傳入。
顏 色圖例如下，請自行排列：

實現(xiàn)效果

 

 

折線圖

設(shè)計思路

用折線圖表查看某一數(shù)據(jù)在單位時段內(nèi)的變化趨勢是一個好的選擇。我們就用PHP來實現(xiàn)一個動態(tài)折線圖表。
它的設(shè)計思想是：
1 接受參數(shù)，得到所有數(shù)值的和，得到數(shù)據(jù)的最大值以確定縱軸的最大刻度值
2 根據(jù)數(shù)據(jù)個數(shù)確定圖像的寬度，并畫出橫軸和縱軸坐標及刻度
3 畫直線連接各點，為每個點填充一個2*2的矩形，突出點的位置
4 在每個點的右上方標注每個點的數(shù)據(jù)值

實現(xiàn)過程

<?
$img_gao=170;
$img_kuan=0;
$jiange=30; //橫坐標點與點之間的間隔，生成的圖片寬度會根據(jù)傳入數(shù)據(jù)的多少而自動變化
$zuo=20;//左側(cè)留空
$you=20;//右側(cè)留空
$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;
//然后創(chuàng)建圖像資源
$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);
　　}
}
//上一個循環(huán)沒有畫出最后一個點效果，這里還要追加
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);

// 標注數(shù)據(jù)值
for($i=0;$i<count($shuju);$i++){
　　imagestring ( $image, 3, $p_x[$i]+4, $p_y[$i]-12,$shuju[$i], $zuobiao_yanse);
}
//設(shè)定文件頭
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的文本格式是由“,”連接的若干個數(shù)據(jù)的字符串，get方式傳入。

由于往圖形里寫入中文需要更多PHP環(huán)境配置，所以這 里給出一個html解決方案，實用也很靈活：
大家只需要根據(jù)數(shù)據(jù)個數(shù)的不同，動態(tài)生成一個表格放置橫軸坐標刻度名稱就行了，像這樣

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