PHP を利用して円グラフ、棒グラフ、折れ線グラフを動的に生成します (転送)

PHP は円グラフ、棒グラフ、折れ線グラフ (リダイレクト) の動的生成を実装します
PHP の画像操作のパフォーマンスは非常に優れており、無料の GD ライブラリを使用して描画やテーブル描画を簡単に実現できます。ここでは、PHP で実装されている円グラフ、折れ線グラフ、棒グラフの使い方を紹介します。これらのコードの特徴は、コードにコピーする必要がなく、計算されたものを使用するだけであることです。データをパラメータに渡して、対応するグラフィック効果を取得します
コードで使用されるすべての関数の説明については、PHP 開発ドキュメントを参照してください

円グラフ
デザイン アイデア
円グラフは、合計値に対する 1 つの値の割合を確認するのに最適な方法です。 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);
?>

手順

画像を表示する必要がある場所に次のコードを挿入します
86903551b0d4b6e23534c6be8dd583e4
の値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 を使用して必要な横軸座標名「zhu_img.php?a=5.4,2,30.2,4,0,6, 7.7,3.8,2,3,4"/>
aの値は自分で計算
a テキスト形式は複数のデータを「,」で繋いだ文字列でgetメソッドで渡す。

<?
$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);
?>

水平軸のスケール名の問題を解決するには、HTML ソリューションも使用します。
データの数に応じて、次のように、水平軸の座標スケール名を配置するテーブルを動的に生成します