Chinaunix

标题: 使用PHP动态生成饼状图、柱状图和折线图。该脚本该如何具体实现？ [打印本页]

作者: zhao3stones 时间: 2007-05-02 23:21
标题: 使用PHP动态生成饼状图、柱状图和折线图。该脚本该如何具体实现？
源码如下，不知如何具体实现，俺是新手，勿笑，谁能帮帮写个简单的实现，谢谢
=================================================
PHP在图像操作方面的表现非常出色，我们只需借助可以免费得到的GD库便可以轻松实现图、表勾画。下面将分别介绍笔者实现的饼状图、折线图和柱状图以及他们的使用方法，这几段代码的特点就是不需要再把它们复制到你的代码之中，只需要把计算得到的数据作为参数传入，即可得到相应的图形效果

开发环境：PHP Version 4.3.6＋GD Version bundled (2.0.22 compatible)

<?
$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方式传入。

作者: zhao3stones 时间: 2007-05-02 23:30
为什么我按照他的方法不出现图表，实现如下

<HTML>

<head>
<title>test</title>
</head>

<body bgcolor="white" text="blue">

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

</BODY>
</HTML>

作者: HonestQiao 时间: 2007-05-03 11:53
用gd画这些图，没什么复杂的。

你先看看画方块的函数，然后分析你的思路。

作者: zhao3stones 时间: 2007-05-03 14:11
问题是我怎么利用上面的代码产生曲线图。谢谢。

作者: 大大狗 时间: 2007-05-03 14:19

原帖由 zhao3stones 于 2007-5-3 14:11 发表
问题是我怎么利用上面的代码产生曲线图。谢谢。

乔版的意思是让你先局部分析一下代码

然后你想画什么都没问题

作者: zhao3stones 时间: 2007-05-03 15:08
谢谢答复。我可能没把问题说清楚。上面的源代码就是画曲线图的，已经实现了，把它存为zhexian_img.php，现在按照它提供的方法调用，如何显示出来，谢谢。

使用方法
在需要显示图像的位置插入如下代码
<img src="zhexian_img.php?a=5.4,2,30.2,4,0,6,7.7,3.8,2,3,4"/>
其中a的值由你自己计算得出
a的文本格式是由“,”连接的若干个数据的字符串，get方式传入。

作者: remembo 时间: 2007-05-04 13:45
标题: 回复 1楼 zhao3stones 的帖子
推荐楼主使用jpgraph这个package。功能强大，而且非常容易使用，就是汉化的时候需要花点工夫！

作者: zhao3stones 时间: 2007-05-04 15:35
谢谢你们的答复，但为什么就没人直接回答我得疑问呢？我就想试试出来的效果，

作者: eye_onme 时间: 2007-05-06 17:04
http://51kela.com/igoogle/demo.html
用这个

把数据推给客户端让客户端去做绘图的事情

欢迎光临 Chinaunix (http://bbs.chinaunix.net/)