|
 |
|
jpgraph ใครเคยใช้ jpgraph บ้างครับ อยากขอตัวอย่างมาศึกษาหน่อยครับ แบบฐานข้อมูลเป็น access นะครับ |
|
 |
|
|
 |
 |
|
ตัวอย่างนี้เป็นการสร้างกราฟแผนภูมิแท่ง ใช้ PHP ในการสร้างครับ
Code (PHP)
<?
header("Content-type: image/png");
// ค่าของข้อมูลที่ต้องการสร้างกราฟ
$data[1]="30";
$data[2]="40";
$data[3]="50";
$data[4]="60";
$data[5]="70";
$data[6]="80";
$data[7]="90";
$data[8]="100";
$img = ImageCreate(500, 310); //สร้างรูปขนาด 250x320
ImageColorAllocate($img, 255, 255, 255); //กำหนดพื้นรูปเป็นสีขาว
//กำหนดสีที่ใช้ในการวาด
$line = ImageColorAllocate($img ,176, 208, 210);
$dataFill = ImageColorAllocate($img, 122, 176, 180);
$black = ImageColorAllocate($img, 87, 32, 324);
//สร้างเส้นตรงในแนวตั้ง ซึ่งเป็นเส้นที่ขนาบขอบด้านซ้ายของแผนภูมิแท่ง
ImageLine($img, 50, 50, 50, 50, $line);
$bartick = 20; //ความหนาของแผนภูมิแท่งแต่ละอัน
$barspace = 30; //ระยะห่างระหว่างแผนภูมิแท่งแต่ละอัน
$barmax = 400; //ความยาวสูงสุดของแผนภูมิแท่ง
$baseX = 50; //จุดเริ่มต้นในแนวนอนของแผนภูมิแท่ง
$baseY = 30; //จุดเริ่มต้นในแนวตั้งของแผนภูมิแท่ง
//วนลูปเพื่อสร้างแผนภูมิแท่ง
for ($i=1; $i<=count($data); $i++) {
//หาจำนวนเความกว้างของกราฟ
$percent[$i]=$data[$i];
$data[$i]=$data[$i]*$barmax /100;
/* สร้างตัวแปรอาร์เรย์เก็บพิกัดของมุมต่างๆของแผนภูมิแท่ง เพื่อนำไปกำหนดให้ฟังก์ชั่น
ImagePolygon() */
$setBar[$i] = array($baseX, $baseY,
($baseX + $barmax), $baseY,
($baseX + $barmax), ($baseY + $bartick),
$baseX, ($baseY + $bartick));
//ใช้ฟังก์ชั่น ImagePolygon() เพื่อสร้างแผนภูมิแท่ง
ImagePolygon($img, $setBar[$i], 4, $line);
//วาดแผนภูมิแท่ง โดยใช้ฟังก์ชั่น ImageFilledRectangle()
ImageFilledRectangle($img, $baseX, $baseY, ($data[$i]+50), ($baseY + $bartick), $dataFill);
//แสดงข้อความเพื่อบอกค่าของแผนภูมิแท่งแต่ละอัน
ImageString($img, 3, ($baseX - 10), $baseY + 5, $i , $black);
ImageString($img, 3, ($data[$i] + 55), $baseY + 5,
number_format($percent[$i]) ."%", $black);
$baseY += $barspace; //ขยับจุดเริ่มต้นในแนวตั้งของแผนภูมิแท่ง
}
ImagePNG($img);
ImageDestroy($img);
?>
Code (Sample1.php)
<html>
<head>
<title>กราฟ</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
</head>
<body>
ตัวอย่างกราฟนะจ๊ะ
<br>
<?php
echo "<img src='Sample2.php'><br><br>\n";
?>
</body>
</html>
Code (Sample2.php)
<?
header("Content-type: image/png");
// ค่าของข้อมูลที่ต้องการสร้างกราฟ
$data[1]="30";
$data[2]="40";
$data[3]="50";
$data[4]="60";
$data[5]="70";
$data[6]="80";
$data[7]="90";
$data[8]="100";
$img = ImageCreate(500, 310); //สร้างรูปขนาด 250x320
ImageColorAllocate($img, 255, 255, 255); //กำหนดพื้นรูปเป็นสีขาว
//กำหนดสีที่ใช้ในการวาด
$line = ImageColorAllocate($img ,176, 208, 210);
$dataFill = ImageColorAllocate($img, 122, 176, 180);
$black = ImageColorAllocate($img, 87, 32, 324);
//สร้างเส้นตรงในแนวตั้ง ซึ่งเป็นเส้นที่ขนาบขอบด้านซ้ายของแผนภูมิแท่ง
ImageLine($img, 50, 50, 50, 50, $line);
$bartick = 20; //ความหนาของแผนภูมิแท่งแต่ละอัน
$barspace = 30; //ระยะห่างระหว่างแผนภูมิแท่งแต่ละอัน
$barmax = 400; //ความยาวสูงสุดของแผนภูมิแท่ง
$baseX = 50; //จุดเริ่มต้นในแนวนอนของแผนภูมิแท่ง
$baseY = 30; //จุดเริ่มต้นในแนวตั้งของแผนภูมิแท่ง
//วนลูปเพื่อสร้างแผนภูมิแท่ง
for ($i=1; $i<=count($data); $i++) {
//หาจำนวนเความกว้างของกราฟ
$percent[$i]=$data[$i];
$data[$i]=$data[$i]*$barmax /100;
/* สร้างตัวแปรอาร์เรย์เก็บพิกัดของมุมต่างๆของแผนภูมิแท่ง เพื่อนำไปกำหนดให้ฟังก์ชั่น
ImagePolygon() */
$setBar[$i] = array($baseX, $baseY,
($baseX + $barmax), $baseY,
($baseX + $barmax), ($baseY + $bartick),
$baseX, ($baseY + $bartick));
//ใช้ฟังก์ชั่น ImagePolygon() เพื่อสร้างแผนภูมิแท่ง
ImagePolygon($img, $setBar[$i], 4, $line);
//วาดแผนภูมิแท่ง โดยใช้ฟังก์ชั่น ImageFilledRectangle()
ImageFilledRectangle($img, $baseX, $baseY, ($data[$i]+50), ($baseY + $bartick), $dataFill);
//แสดงข้อความเพื่อบอกค่าของแผนภูมิแท่งแต่ละอัน
ImageString($img, 3, ($baseX - 10), $baseY + 5, $i , $black);
ImageString($img, 3, ($data[$i] + 55), $baseY + 5,
number_format($percent[$i]) ."%", $black);
$baseY += $barspace; //ขยับจุดเริ่มต้นในแนวตั้งของแผนภูมิแท่ง
}
ImagePNG($img);
ImageDestroy($img);
?>
สำหรับอื่น ๆ สามารถอ่านได้จาก
Ref : PHP Graph & Charts
หรือจะลองใช้งาน
PHP JpGraph
ครับ
|
 |
 |
 |
 |
Date :
2009-04-25 15:55:13 |
By :
webmaster |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|

|
 |
 |
 |
 |
Date :
2011-06-24 20:37:44 |
By :
sinseedsin |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 03
|