웹마스터 팁

http://zzony.interiorpc.com/graph/test_graph.php-0-
<?
/* 코드 용도 : 막대그래프를 그리자 ^_______^
    코드 의미 : 암것도 없다. html이 아닌 GD로 그래프를 그려보자.
    코드 작성 : zzony
    코드 작성일: 월드컵 개막 하루전날
    참 고: html로 작성된 막대그래프를 GD로도 그려보았습니다.또 다른 방법으로
             그려 보는 분이 계시면 정말 재밌겠네요 ^^.
*/

//이미지 초기화
if ($refresh) {
                        for ($i=0;$i<10;$i++)
                        {
                                $temp = "c_".$i;
                                $temp_var = $$temp;
                                if($temp_var)
                                {
                                        $makde[$i]=$temp_var;
                                }
                        }

                        $makde_number = count($makde);
                        @$makde_width_temp = $x/$makde_number;
                        for ($i=0;$i<10;$i++)
                        {
                                $m[$i]=$makde_width_temp * $i;
                        }
                        $max_value=$makde[0];
                        for ($i=0;$i<$makde_number;$i++)
                        {
                                if($makde[$i] > $max_value)
                                {
                                        $max_value = $makde[$i];
                                }
                        }
                        $m[10] = $x;
                        for ($i=0;$i<$makde_number;$i++)
                        {
                                $makde_percent[$i] = ($makde[$i]/$max_value)*$y;
                        }

                        $im =  @ImageCreate($x,$y) or die ("이미지를 초기화 하지 못했습니다");
                        $backgroundcolor=ImageColorAllocate($im,234,253,231);
                        $rectanglecolor = ImageColorAllocate($im,65,127,250);
                        $white=ImageColorAllocate($im,255,255,240);
                        ImageFilledRectAngle($im,0,$y-20,$x,$y,$white);
                        for ($i=0;$i<$makde_number;$i++)
                        {
                                ImageFilledRectAngle($im,$m[$i]+20,$y-$makde_percent[$i],$m[$i+1]-10,$y-20,$rectanglecolor);
                                
                                if($y-$makde_percent[$i]-15<0)
                                {
                                        Imagestring($im,5,$m[$i]+22,$y-$makde_percent[$i],$makde[$i],imagecolorallocate($im,42,31,21));
                                }
                                else
                                {
                                        if($makde_percent[$i]<15)
                                        {        
                                                Imagestring($im,5,$m[$i]+22,$y-35,$makde[$i],imagecolorallocate($im,42,31,21));
                                        }
                                        else
                                        {
                                                Imagestring($im,5,$m[$i]+22,$y-$makde_percent[$i]-15,$makde[$i],imagecolorallocate($im,42,31,21));
                                        }
                                }
                                $name="Value".$i;
                                Imagestring($im,3,$m[$i]+22,$y-15,$name,imagecolorallocate($im,42,31,21));
                        }
                        ImagePNG($im,"makde.png");
                        ImageDestroy($im);
                        echo ("<meta http-equiv="refresh" content="0; url=test_graph.php">") ;
}

else{
echo "<form name=viewsource method=post action='test_graph.php'>1<input type=text name=c_0 size=3>2<input type=text name=c_1 size=3>3<input type=text name=c_2 size=3>4<input type=text name=c_3 size=3>5<input type=text name=c_4 size=3>6<input type=text name=c_5 size=3>7<input type=text name=c_6 size=3>8<input type=text name=c_7 size=3>9<input type=text name=c_8 size=3>10<input type=text name=c_9 size=3><br>그래프크기는<br>가로<input type=text name=x size=4><br>세로<input type=text name=y size=4><input type=hidden name=refresh value='1'><input type=submit value='확인'></form>";
echo "값을 띄엄띄엄 넣으시면 안된답니다.<br>이 테스트의 목적은 그래프를 그리는것.!.예외처리 하기 귀차나요 ㅜ.ㅜ<br>";
echo "그래프가 중점이기 때문에 값의 표시나 막대이름이 겹칠수 있습니다.<br> 이떄는 그래프가로세로 크기를 늘려주세요<br>";
echo "값은 앞에부터 차례로 넣으시면 되고 전부 다 넣으실 필요는 없습니다,<br> 그 경우의 예외처리는 했습니다 ^^<br>";
echo "<font color='red'>장난친사람 zzony!!!!!!</font><br>";
echo "<img src='makde.png'>";}


/*
위가 전체 코드입니다.
그렇다면 하나씩 살펴볼까요.

        for ($i=0;$i<10;$i++)
                        {
                                $temp = "c_".$i;
                                $temp_var = $$temp;
                                if($temp_var)
                                {
                                        $makde[$i]=$temp_var;
                                }
                        }
이 구문은 10개의 값을 처리하겠다는 겁니다. 물론 원하시는데로 수정하셔도 됩니다.
form으로 넘어온 $c_1,$c_2,$c_3...등등을 배열로 변환하는 부분입니다.
$makde[]가 실제 값을 가지는 배열이 되는거지요.

                        $makde_number = count($makde);
                        @$makde_width_temp = $x/$makde_number;
                        for ($i=0;$i<10;$i++)
                        {
                                $m[$i]=$makde_width_temp * $i;
                        }

자 이것은 실제 넘어온 값이 몇개인지 세어서 그래프의 넓이와 각 막대의 넓이를 구하는
부분입니다.
$makde_width_temp 는 각 막대의 넓이를 가지게 되고
$m[$i]에는 각 막대가 그려질 위치가 저장되게 됩니다.
$makde_number는 막대의 갯수가 몇개인지 저장되는 변수로 사용됩니다.
나중에 막대를 그릴때나 for문을 돌릴때 사용되게 되지요.

                        $max_value=$makde[0];
                        for ($i=0;$i<$makde_number;$i++)
                        {
                                if($makde[$i] > $max_value)
                                {
                                        $max_value = $makde[$i];
                                }
                        }
이 부분은 가장 큰 값을 찾는 부분입니다.
$max_value에는 가장 큰 값이 저장됩니다.
$makde[$i]는 위에서 보았다시피 입력받은 각 데이타들의 배열입니다.
$makde_number는 입력받은 데이타들이 몇개인지 저장되어 있죠!.

                        $m[10] = $x;
                        for ($i=0;$i<$makde_number;$i++)
                        {
                                $makde_percent[$i] = ($makde[$i]/$max_value)*$y;
                        }

이 부분은 입력받은 그래프의 높이 ($y)에 맞춰서 각 막대를 그려줘야 하기 때문에 가장 큰 값을
찾아서 그 막대를 기준으로 다른 막대의 비율을 구하게 됩니다.
그래야 아주 보기 좋은 그래프가 그려진답니다.

$m[10]=$x; 그래프의 x축의 마지막을 알려주기 위해 사용됩니다.


                        $im =  @ImageCreate($x,$y) or die ("이미지를 초기화 하지 못했습니다");
                        $backgroundcolor=ImageColorAllocate($im,234,253,231);
                        $rectanglecolor = ImageColorAllocate($im,65,127,250);
                        $white=ImageColorAllocate($im,255,255,240);
                        ImageFilledRectAngle($im,0,$y-20,$x,$y,$white);

실제 GD가 이용되는 부분입니다.
지금까지는 전부 그래프를 그리기 위해 데이타 처리했던 부분이구요,여기가 실제
처리된 데이타를 화면에 뿌려주게 되는 곳입니다. 이곳이 핵심인것이지요.

imagecreate($x,$y)는 가로 $x,세로 $y만큼의 도화지에 그림을 그릴꺼니까 준비해달라.
라고 요청하는것이랍니다. or die.... 는.. 예외처리 구문입니다. 안적으셔도 되구요..
의미는.. 도화지 안만들어 줄꺼면 안 만들어 줄꺼라고 말해달라고 하는 의미 정도.. ^^..
자 $im = ImageCreate($x,$y).. 즉 도화지가 $x,$y만한 크기로 $im에 저장되었습니다.

그런데 우리는 흰색 도화지만 쓰는건 아니자나요!. 그래서 색지를 고르기 위해서..
$backgroundcolor = ImageColorAllocate($im,234,253,231);
라는 구문으로 RGB색상 234,253,231의 색지를 고른거랍니다.
아. 여기서  ImageColorAllocate 함수에 대해 설명하자면..
ImageColorAllocate($im,234,253,231); RGB색상 234,253,231을 $im도화지에 쓸꺼야!.
라고 말하는거랍니다. 쉽죠? ^^..

$rectanglecolor = ImageColorAllocate($im,65,127,250);
자 이부분은 무엇이냐!.
우린 RGB색상 65,127,250번을 도화지 $im에 쓸건데! ..이 색깔좀 $rectanglecolor에
저장해죠!. 라는 말입니다.하하.. 너무 쉽죠.. 제가 너무 여러분을 무시하나요?.. 조금이라도
쉽게 설명하려는 배려라고 생각해주세요 ㅜ.ㅜ

$white=ImageColorAllocate($im,255,255,240);
위에랑 똑같죠!. 모두모두 이해하셨으리라 믿구요.

ImageFilledRectAngle($im,0,$y-20,$x,$y,$white);

아 도대체 이 복잡한 문장은 무엇이다냐! 하는 분들.. 잠깐만 설명을 들으면 코딱지 파는일보다
쉽습니다.
이것이 무엇인고 하면!..
야!. $im도화지에 좌표 (0,$y-20)부터 ($x,$y)까지 사각형 만들어!.그리고 색깔은 $white야!.
라는 말이랍니다.
자.. 좌표 (0,$y-20)이란 무엇인고 하니 사각형을 그리는데 있어서 시작점이랍니다.


                               (0,$y-20)__________
                                        |                |
                                        |                |
                                        |                |
                                        |                |
                                        |                |
                                        __________($x,$y)

바로 이그림 입니다!. 이렇게 네모를 그리란 말이야! 라고 명령하는거지요..
그렇다면 $y-20이란 무엇을 의미하느냐.!.. $y는 최초 그래프의 크기를 입력받을때의 세로값입니다!.

http://zzony.interiorpc.com/graph/graph1.jpg 이 그림 참조


이 세로값에서 -20을 뺀 이유는 이 사각형이 지금 어느 부분이냐 하면.

http://zzony.interiorpc.com/graph/graph2.jpg 이 그림 참조

바로 이부분에 사용되는 사각형인것입니다.
$x = 400이고 $y= 400이라면
그래서 20만큼을 빼주면.. 400-20 =380.
$x값은 0을 쓰고
즉 (0,380)위치부터 (400,400)위치까지 사각형을 그려라! 이런말인게죠!
$x=400이고 $y가 400이면 이렇게 되겠죠.
ImageFilledRectAngle($im,0,$y-20,$x,$y,$white);-->ImageFilledRectAngle($im,0,380,400,400,$white);

그림까지 붙였지만 아직도 설명이 잘 안된것 같습니다.. ㅜ.ㅜ 그래도 다들 이해하셨으리라 믿고..

                        for ($i=0;$i<$makde_number;$i++)
                        {
                                ImageFilledRectAngle($im,$m[$i]+20,$y-$makde_percent[$i],$m[$i+1]-10,$y-20,$rectanglecolor);
                                
                                if($y-$makde_percent[$i]-15<0)
                                {
                                        Imagestring($im,5,$m[$i]+22,$y-$makde_percent[$i],$makde[$i],imagecolorallocate($im,42,31,21));
                                }
                                else
                                {
                                        if($makde_percent[$i]<15)
                                        {        
                                                Imagestring($im,5,$m[$i]+22,$y-35,$makde[$i],imagecolorallocate($im,42,31,21));
                                        }
                                        else
                                        {
                                                Imagestring($im,5,$m[$i]+22,$y-$makde_percent[$i]-15,$makde[$i],imagecolorallocate($im,42,31,21));
                                        }
                                }
                                $name="Value".$i;
                                Imagestring($im,3,$m[$i]+22,$y-15,$name,imagecolorallocate($im,42,31,21));
                        }

아주아주 복잡한 부분입니다.
이 부분이 하는 역활은 이제 본격적으로 그래프를 그려주고 그래프의 값을 알려주며 그래프의 이름을 정하는 거랍니다.

        for ($i=0;$i<$makde_number;$i++)

$makde_number ! 즉.. 그래프의 갯수만큼 for문을 돌아라 ! 라는 말입죠.

        ImageFilledRectAngle($im,$m[$i]+20,$y-$makde_percent[$i],$m[$i+1]-10,$y-20,$rectanglecolor);

아 정말 복잡합니다. 보기도 싫으시죠!. 하지만 잠깐!. 너무 쉬운 문장입니다. 잘 보세요.

$im도화지에 ($m[$i]+20,$y-$makde_percent[$i]) 좌표로부터
                   ($m[$i+1]-10,$y-20) 좌표까지 $rectanglecolor 색으로 사각형을 그려라!
라는 말입죠.
$m[$i]는 위에서 데이터 처리된 각 그래프의 x축값 시작점인겁니다.
이건 그래프의 갯수가 10개가 될 수도 있고 5개가 될 수도 있기 때문에 그에 따라서 신축적으로 그래프의 크기를
변화시키고 각 막대가 그려질 위치값을 가지게 되는거지요.
$m[$i]에다가 왜 +20을 붙였느냐!. 이건 좀 더 이쁘게 하려는 의도입니다. ㅎㅎㅎㅎㅎ.
$makde_percent[$i]엔 머가 들어가 있는지 아시죠? 바로 막대의 높이입니다.!
이 부분을 더 자세히 설명하자니 .. 표현력도 떨어지고 설명하면 할 수록 햇갈리실것 같아서..
그냥 힌트만 드리도록 하겠습니다.
사각형이 그려질때는 상단좌측에서 하단우측으로 그려집니다.
즉 막대의 밑둥에서 위로 그려 올라가는게 아니고 항상 상단좌측에서 하단우측으로 그려지는겁니다.
저 코드가 저렇게 복잡한것은 다 그것때문이죠 ㅜ.ㅜ.. 제 말을 잘 이해하시고 코드를 한번 더 보시면.. 이해가
십분 빠르실겁니다. 상단좌측->하단우측!.

                if($y-$makde_percent[$i]-15<0)

역시 예외처리 부분입니다. 막대의 상단에 데이타값을 적어주는데 값이 너무 크거나 너무 작으면 이쁘게
안써지거든요. 그래서 이쁘게 쓰기 위한 예외처리 부분입니다.!

Imagestring($im,5,$m[$i]+22,$y-$makde_percent[$i],$makde[$i],imagecolorallocate($im,42,31,21));

아.. 또 함수가 하나 나왔습니다. Imagestring!.. 이건 글을 써라!. 라는 명령입죠.
그렇다면 저 위에 코드는 무슨뜻이냐.

$im도화지에 글씨 5로 x좌표 $m[$i]+22, y좌표 $y-$makde_percent[$i]..
즉 ($m[$i]+22,$y-$makde_percent[$i])위치에 $makde[$i] 데이타를 RGB 색깔 42,31,21로 글씨를 쓰란 말이야!

라는 뜻이랍니다. 헥헥..

좌표가 복잡한 이유는 .. 이제 설명 안해도 되죠?.. 다 이쁘게 하기 위한겁니다 쥘쥘..

        $name="Value".$i;
        Imagestring($im,3,$m[$i]+22,$y-15,$name,imagecolorallocate($im,42,31,21));

막대의 이름을 적어줍니다. 여기서는 Value1,Value2,Value3 식으로 그냥 적어줍니다.

                ImagePNG($im,"makde.png");
                        ImageDestroy($im);

아.. 이거 팁하나 올리기 너무 힘듭니다.. ㅜ.ㅜ .. 표현력의 한계에 부딪히다보니 정신이 없고 내가 이걸 왜 쓰고
있나 싶습니다. ㅜ.ㅜ

ImagePng($im,"makde.png") 는 $im도화지에 그린그림을 makde.png라는 화일에 저장해라!.. 라는 말이에요
jpg로 저장 하시려면 ImageJPEG($im,"makde.jpg')라고 하시면 되고.. BMP는 ImageBMP($im,"makde.bmp')라고
하시면 되는 간단한 문장입니다.
그런데 왜 화일로 저장하느냐 라고 물으신다면 전 이렇게 대답한답니다!.

"아따 그림을 서버에다 그려서 모니터에 보여주려면 그림화일로 만들어야 된다니께!"

그렇습니다. GD library는 단지 그림을 그려줄뿐 보여주진 않는거죠. 그렇다면 어떻게 보느냐?? 라고 물으신다면

"아따.. <img src='.....> 알지?.. 알면 쓰면 되는게지"

그렇습니다.. 그렇게 쓰면 되는겁니다.

마지막으로         
                                        
                ImageDestroy($im);

그림 다 그렸으니까 이제 도화지 없애버리자!. 왜! 메모리 아깝자나!... 그런뜻이랍니다 ㅠ.ㅠ
그다음 echo문은 간단한 form입니다.

드디어.. 설명이 끝났습니다.

제로보드에 응용하는 방법도 자세히 알려드리려고 했는데..
제로보드를 쓰는 홈피에서 회원들의 포인트점수를 상위 10명..또는 20명을 순위별로 그래프로
그리는 방법을 설명코자 했는데.. 헥헥.. .. 힘들어서 여기까지만 하겠습니다.
간단히 설명하자면..

DB에 zetyx_member_table 에는 point1, point2라는 게 있죠.
$point = mysql_query(select user_id,point1,point2 from zetyx_member_table)

이렇게 하시고 for문으로 $point돌려서 배열에 넣고.. 배열sort함수 써서 순서대로 쭉 놓고
앞에서 20넘,또는 10넘 짜르고..

그렇게 짜른 10명을 위에서 만든 배열 $makde[]에다가 순서대로 쭈욱 넣으면.
뚝딱 뚝딱 끝입니당.
이름이나 기타 .. 이쁘게 안그려질때는 .. 그래프를 가로로 그려보세요.. 한결 그리기가 쉬울
거랍니다.


p.s 용서하시길.. 쓰다보니 제가 지쳐서.. 결국 제대로 설명을 못드린것 같군요 ㅜ.ㅜ
      다음에는 좀 시간을 가지고 자세히 해야겠어요.. 그렇지 않으면 안쓰는게 낳겠네요