PHP has a surprising ability-you can use its server-side script to create dynamic graphics. This feature is based on the GD library, which is an ANSI C library designed by Thomas Boutell, which supports the addition of the library. Most common graphic file formats other than GIF files (although the library's designers have promised to add. gif support as soon as the LZW patent expires on July 7, 2004).
PHP4.3 and its later versions are integrated with the GD library. If you are using an older version of PHP, you will need to manually install graphics support. There is a lot of information about it here.
Line chart
To demonstrate how to create dynamic graphics with PHP, we created some custom graphics. The first example is a line chart drawn on the grid, as shown in a.
Figure A
this.width=500 ' align= ' center ' hspace= ' vspace= ' >
We call this page grid.php (related accessories: Listing a). In order to invoke the dynamically generated graphics of a Web page, you only need to access this PHP page, which passes the graphic to the browser. The IMG element can do the job very well. The following is an example code that implements this function:
498) this.width=498; ' OnMouseWheel = ' javascript:return big (This) ' src= ' grid.php '/>
Now, let's start writing the code to create the graph. The following is a snippet of source code in grid.php:
Add a value to a graphic
$graphValues =array (0,80,23,11,190,245,50,80,111,240,55);
First, we define the values of the graphs. In this example, the graphical values are written directly into an array in the code, but you can easily rewrite the code to get the values from an XML file, a table, or a database. These values range from 0 to 250 (the graphic size in pixels). These values determine the initial pixel position of the segments on each grid. If you want to use numbers 0 and 100 (expressed as percentages), you simply multiply these values by 2.5来 to determine the pixel position on the grid.
We then send a PNG header and define the height and width of the image:
Define. PNG image
Header ("Content-type:image/png");
$imgWidth = 250;
$imgHeight = 250;
We send a graphics header to "spoof" the browser so that it thinks our PHP page is a real image so it can be displayed correctly on the screen. The server sends the information generated by the program to the browser in the form of a binary data stream.
The PNG (Portable network Graphic, Portable Network Graphics) standard is a lossless graphics format that was introduced in 1995 due to the legal issue of the LZW algorithm patent for GIF.
Now, let's instantiate the graphical object and define the colors we used in the graphic:
Create an image, define a color
$image =imagecreate ($imgWidth, $imgHeight);
$colorWhite =imagecolorallocate ($image, 255, 255, 255);
$colorGrey =imagecolorallocate ($image, 192, 192, 192);
$colorBlue =imagecolorallocate ($image, 0, 0, 255);
We set the white background, the gray frame and the blue polyline. You can easily modify or add colors by creating new variables and assigning different RGB values.
We can use the Imageline function to create a gray frame, and each time we call this function we draw a line:
Create a box around an image
Imageline ($image, 0, 0, 0, $colorGrey);
Imageline ($image, 0, 0, 0, $colorGrey);
Imageline ($image, 249, 0, 249, 249, $colorGrey);
Imageline ($image, 0, 249, 249, 249, $colorGrey);
The two-dimensional x/y pixel coordinates are used here. Each pair of values in the Imageline function specifies the starting and ending points of the image.
To achieve grid lines, we draw a gray line every 25 pixels on the X and Y axes:
Create Mesh
for ($i =1; $i <11; $i + +) {
Imageline ($image, $i *25, 0, $i *25, $colorGrey);
Imageline ($image, 0, $i *25, $i *25, $colorGrey);
}
The position (0,0) represents the upper-left corner of the grid, and the position (250,250) represents the lower-right corner. Each axis is divided into 10 cells, each with a width of 25 pixels, or 250 pixels (the size of a graphic).
To create a line chart, we simply loop through the coordinate values in the array and draw the start and end points of each segment by coordinates:
Create a line chart
for ($i =0; $i <10; $i + +) {
Imageline ($image, $i *25, (250-$graphValues [$i]), ($i + 1) *25, (250-$graphValues [$i +1]), $colorBlue);
}
PHP will automatically fill the blue line between the start and end points. In this simple example there are only 10 values, but it is easy to extend the technique, such as creating complex graphs like stock indices and so on.
Finally, we need to output this image to the browser and empty the memory space on the server to save the image:
Output graphics and clear in-memory images
Imagepng ($image);
Imagedestroy ($image);
?>
Histogram
The basic program used to create a line chart is modified to create a histogram (shown in B).
Figure B
this.width=500 ' align= ' center ' hspace= ' vspace= ' >
(annex: Listing B) This procedure is slightly different from the code we used to draw a line chart. The Imagefilledrectangle function creates two straight squares-dark straight squares representing the values stored in the $graphvalues array, while the light straight squares are used to fill the gap between dark squares:
Create a histogram
for ($i =0; $i <10; $i + +) {
Imagefilledrectangle ($image, $i *25, (250-$graphValues [$i]), ($i + 1) *25, $colorDarkBlue);
Imagefilledrectangle ($image, ($i *25) +1, (250-$graphValues [$i]) +1, (($i + 1) *25) -5, 248, $colorLightBlue);
}
Pay attention to the CPU load
When you create these graphs on the server side, you need to consider this issue carefully: CPU load. If you have too many such dynamic picture generation tasks on the Web side, you may find that results in performance degradation.
More complex usage
The examples in this article are just a starting point. If you want more information about the PHP graphics library, see the graphical functions page on the PHP manual.
English version address:
http://www.bkjia.com/PHPjc/446939.html www.bkjia.com true http://www.bkjia.com/PHPjc/446939.html techarticle PHP has a surprising ability-you can use its server-side script to create dynamic graphics. This feature is based on the GD library, which is the ANSI C library designed by Thomas Boutell, the library ...
