How to draw line chart with GD Library in PHP

Source: Internet
Author: User
Tags 0xc0 image line
This article describes how to use the GD Library in php to draw a line chart, which involves some simple usage of the GD Library in php. This article describes in detail, if you are interested in learning it together, some simple image functions can be used directly in PHP. However, most of the images to be processed must be compiled with the GD Library. In addition to installing the GD Library, other libraries may be required in PHP, depending on the image formats supported. The GD library can be used in the library such as step 1. Using functions in the GD library, you can operate and process various points, lines, Ry, text, and colors, or create or read image files in multiple formats.

In PHP, image processing operations through the GD library are first processed in the memory, and then output to the browser or saved to the server disk in the form of a file stream after the operation is completed. To create an image, follow these steps.

(1) create a canvas: All the drawing designs must be completed on a background image, and the canvas is actually a temporary area opened in the memory for storing image information. In the future, image operations will be based on this background canvas. the management of this canvas is similar to the canvas we use for painting.

(2) Image Painting: After the canvas is created, you can use the canvas resources to set the image color, fill the canvas, painting points, line segments, and various geometric figures using various portrait functions, and add text to the image.

(3) output Image: After the entire image is drawn, you need to save the image to a file specified by the server in a certain format, or directly output the image to the browser for display to the user. Before the image is output, use the header () function to send the Content-type notification to the browser. this time, the image is not text.

(4) release resources: after an image is output, the content in the canvas is no longer useful. To save system resources, you need to clear all memory resources occupied by the canvas in time.

Use GD to draw a line chart in php. the code is as follows:

Class Chart {private $ image; // defines the image private $ title; // defines the title private $ ydata; // defines the y axis data private $ xdata; // define the x-axis data private $ seriesName; // define the name private $ color for each series of data; // define the bar chart color private $ bgcolor; // define the image background color private $ width; // define the image width private $ height; // define the image length/** constructor * String title image title * Array xdata index Array, X axis data * Array ydata index Array, number Array, y-axis data * Array series_name index Array, data series name */function _ construct ($ ti Tle, $ xdata, $ ydata, $ seriesName) {$ this-> title = $ title; $ this-> xdata = $ xdata; $ this-> ydata = $ ydata; $ this-> seriesName = $ seriesName; $ this-> color = array ('# DC',' # B ',' # edb', '# DDDF ', '# CBE',' # E', '# ff',' # fff', '# AFC');}/** public method, set the color of the bar chart * Array color Array. The value of the element is '# DC'. */function setBarColor ($ color) {$ this-> color = $ color ;} /** draw a line chart */public function paintLineChart () {$ ydataNum = $ t His-> arrayNum ($ this-> ydata); // Obtain the number of data groups $ max = $ this-> arrayMax ($ this-> ydata ); // obtain the maximum value of all rendered data $ max = ($ max> )? $ Max:; $ multi = $ max/; // if the maximum data size is greater than, scale it down. $ barHeightMulti = .; // the ratio of bar height scaling $ lineWidth =; $ chartLeft = (+ strlen ($ max) *; // Set margin $ lineY = on the left of the image; // initialize the Y coordinate of the bar chart. // set the width and height of the image. // $ this-> width = $ lineWidth * count ($ this-> xdata) + $ chartLeft-$ lineWidth /.; $ margin =; // The right side of the small rectangle description is margin $ recWidth =; // The width of the small rectangle $ recHeight =; // The height of the small rectangle $ space =; // the spacing between the small rectangle and the bar chart $ tmpWidth =; // you can specify the width and height of the image. $ lineChartWidth = $ LineWidth * count ($ this-> xdata) + $ chartLeft-$ lineWidth /.; // if ($ ydataNum>) {$ tmpWidth = $ this-> arrayLengthMax ($ this-> seriesName) **/+ $ space + $ recWidth + + $ margin;} $ this-> width = $ lineChartWidth + $ tmpWidth; $ this-> height =; $ this-> image = imagecreatetruecolor ($ this-> width, $ this-> height ); // prepare the canvas $ this-> bgcolor = imagecolorallocate ($ this-> image,); // set the background color of the image // Color of the bar chart $ color = array (); foreach ($ this-> color as $ col) {$ col = substr ($ col, strlen ($ col )-); $ red = hexdec (substr ($ col,); $ green = hexdec (substr ($ col ,,)); $ blue = hexdec (substr ($ col,); $ color [] = imagecolorallocate ($ this-> image, $ red, $ green, $ blue );} // set the line segment color, font color, and font path $ lineColor = imagecolorallocate ($ this-> image, xcc ); $ fontColor = imagecolorallocate ($ this-> image, x, xf, xf); $ fon TPath = 'font/simsun. ttc '; imagefill ($ this-> image, $ this-> bgcolor); // painting background // the short-term and left-side edges of a painting image for ($ I =; $ I <; $ I ++) {imageline ($ this-> image, $ chartLeft-, $ lineY-$ barHeightMulti * $ max // $ multi * $ I, $ lineChartWidth, $ lineY-$ barHeightMulti * $ max // $ multi * $ I, $ lineColor); imagestring ($ this-> image ,,, $ lineY-$ barHeightMulti * $ max // $ multi * $ I-, floor ($ max/* $ I), $ fontColor);} imageline ($ this-> image, $ chartLeft-, $ cha RtLeft-, $ lineY, $ lineColor); imageline ($ this-> image, $ lineChartWidth-, $ lineChartWidth-, $ lineY, $ lineColor ); $ style = array ($ lineColor, $ this-> bgcolor, $ this-> bgcolor, $ this-> bgcolor); imagesetstyle ($ this-> image, $ style); // draw the line chart separator (dotted line) foreach ($ this-> xdata as $ key => $ val) {$ lineX = $ chartLeft ++ $ lineWidth * $ key; imageline ($ th Is-> image, $ lineX, $ lineX, $ lineY, IMG_COLOR_STYLED);} // draw the line chart foreach ($ this-> ydata as $ key => $ val) {if ($ ydataNum =) {// if ($ key = count ($ this-> ydata)-) break for a series of data; $ lineX = $ chartLeft ++ $ lineWidth * $ key; $ lineY = $ lineY-$ barHeightMulti * ($ this-> ydata [$ key +])/$ multi; // draw a line if ($ key = count ($ this-> ydata)-) {imagefilledellipse ($ this-> image, $ lineX + $ lineWidth, $ lineY ,,, $ color []);} image Line ($ this-> image, $ lineX, $ lineY-$ barHeightMulti * $ val/$ multi, $ lineX + $ lineWidth, $ lineY, $ color []); imagefilledellipse ($ this-> image, $ lineX, $ lineY-$ barHeightMulti * $ val/$ multi, $ color []);} elseif ($ ydataNum>) {// foreach ($ val as $ ckey => $ cval) {if ($ ckey = count ($ val)-) break for multiple series of data; $ lineX = $ chartLeft ++ $ lineWidth * $ ckey; $ lineY = $ lineY-$ barHeightMulti * ($ val [$ ckey +])/$ multi; // draw a line if ($ ckey = Count ($ val)-) {imagefilledellipse ($ this-> image, $ lineX + $ lineWidth, $ lineY ,,, $ color [$ key % count ($ this-> color)]);} imageline ($ this-> image, $ lineX, $ lineY-$ barHeightMulti * $ cval/$ multi, $ lineX + $ lineWidth, $ lineY, $ color [$ key % count ($ this-> color)]); imagefilledellipse ($ this-> image, $ lineX, $ lineY-$ barHeightMulti * $ cval/$ multi ,,, $ color [$ key % count ($ this-> color)]) ;}}// the x coordinate value of the bar chart for painting foreach ($ this-> xdata $ Key => $ val) {$ lineX = $ chartLeft + $ lineWidth * $ key + $ lineWidth/-; imagettftext ($ this-> image,-, $ lineX, $ lineY +, $ fontColor, $ fontPath, $ this-> xdata [$ key]);} // if ($ ydataNum>) {$ x = $ lineChartWidth + $ space; $ y =; foreach ($ this-> seriesName as $ key => $ val) {imagefilledrectangle ($ this-> image, $ x, $ y, $ x + $ recWidth, $ y + $ recHeight, $ color [$ key % count ($ this-> color)]); imagettfte Xt ($ this-> image, $ x + $ recWidth +, $ y + $ recHeight-, $ fontColor, $ fontPath, $ this-> seriesName [$ key]); $ y + = $ recHeight + ;}// painting Title $ titleStart = ($ this-> width -. * strlen ($ this-> title)/; imagettftext ($ this-> image, $ titleStart, $ fontColor, $ fontPath, $ this-> title ); // output image header ("Content-Type: image/png"); imagepng ($ this-> image);}/** private method. when the array is a binary array, length of the statistics Array * Array arr Array to be counted */private function RrayNum ($ arr) {$ num =; if (is_array ($ arr) {$ num ++; for ($ I =; $ I <count ($ arr ); $ I ++) {if (is_array ($ arr [$ I]) {$ num = count ($ arr); break ;}} return $ num ;} /** private method: calculates the depth of the Array * Array arr Array */private function arrayDepth ($ arr) {$ num =; if (is_array ($ arr )) {$ num ++; for ($ I =; $ I <count ($ arr); $ I ++) {if (is_array ($ arr [$ I]) {$ num + = $ this-> arrayDepth ($ arr [$ I]); break ;}} return $ num ;}/ ** Private method: find the maximum value in a group * Array arr numeric Array */private function arrayMax ($ arr) {$ depth = $ this-> arrayDepth ($ arr ); $ max =; if ($ depth =) {rsort ($ arr); $ max = $ arr [];} elseif ($ depth>) {foreach ($ arr as $ val) {if (is_array ($ val) {if ($ this-> arrayMax ($ val)> $ max) {$ max = $ this-> arrayMax ($ val) ;}} else {if ($ val >$ max) {$ max =$ val ;}}}} return $ max;}/** private method, calculate the average value of the Array * Array arr numeric Array */function ArrayAver ($ arr) {$ aver = array (); foreach ($ arr as $ val) {if (is_array ($ val) {$ aver = array_merge ($ aver, $ val) ;}else {$ aver [] = $ val ;}return array_sum ($ aver)/count ($ aver) ;}/ ** private method, evaluate the maximum length of elements in the Array * Array arr string Array, which must be a Chinese character */private function arrayLengthMax ($ arr) {$ length =; foreach ($ arr as $ val) {$ length = strlen ($ val)> $ length? Strlen ($ val): $ length;} return $ length/;} // destructor function _ destruct () {imagedestroy ($ this-> image );}}

The test code is as follows:

$ Xdata = array ('test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5', 'Test 6', 'Test 7 ', 'test 8', 'Test 9'); $ ydata = array (,,,,,,,,), array (,); $ color = array (); $ seriesName = array ("July", "August "); $ title = "test data"; $ Img = new Chart ($ title, $ xdata, $ ydata, $ seriesName); $ Img-> paintLineChart ();

As follows:


This code ends.

The following describes some simple usage of the GD Library in php.

Today I learned about some simple usage of the GD Library. now I will summarize it a little bit!

What is the GD library ?, Graphic device, Image Tool Library, gd Library is an extension library for php to process graphics. the gd Library provides a series of APIs for processing images. you can use the GD library to process images or generate images. The GD library on a website is usually used to generate thumbnails, add watermarks to images, or generate reports for website data.

Php is not limited to HTML text output. Php can also use the GD extension library to dynamically output images, such as text buttons, verification codes, and data statistical charts. Ha can easily edit images, process thumbnails and add watermarks to images, and has powerful image processing capabilities.

First, let's take some steps to draw a simple graph in the GD Library:

1. First, create a canvas. here we use the imagecreatetruecolor function or imagecreate. The difference is that the former creates a true color image and the latter creates a palette-based image.

$ Img = imagecreatetruecolor (100,100). Two parameters correspond to the width and height of the created Image respectively.

2. set some necessary "dye boxes"

In fact, it is to define some fill colors that will be used later. Here we define them in this position. here we use the imagecolorallocate function.

$ White = imagecolorallocate ($ img, 0xFF, 0xFF, 0xFF) or you can use the RGB color naming method, such as $ white = imagecolorallocate ($ img, 255,255,255 ); $ gray = imagecolorallocate ($ img, 0xC0, 0xC0, 0xC0); $ darkgray = imagecolorallocate ($ img, 0x90, 0x90, 0x90 ); $ navy = imagecolorallocate ($ img, 0x00, 0x00, 0x80); $ darknavy = imagecolorallocate ($ img, 0x00, 0x00, 0x50); $ red = imagecolorallocate ($ img, 0xFF, 0x00, 0x00); $ darkred = imagecolorallocate ($ img, 0x90, 0x00, 0x00); $ black = imagecolorallocate ($ img, 0x00,0x00,0x00 );

Here we define more colors.

3. fill area color, which can be simply understood as the background color of the filled image, using the imagefill function

Imagefill ($ img, $ white). Here 0 0 indicates filling the background color from x y.

4. to draw a graph, for example, to draw a pie chart, you need the imagefilledarc function.

Imagefilledarc () has many parameters, such as imagefilledarc ($ img, 50, $ I, 50, $ red, IMG_ARC_PIE );

It indicates to draw an arc in the range of 50, $ I from the red image img, respectively.

5. during this period, we can also add some instructions, such as adding a string horizontally and using imagestring ($ img, 40, "hello, world! ", $ Red) indicates to write a red hello, world! Words

6. image output

First, you need to know the format of the image to be output by the browser. for example, if it is output in png format, use header ("Content-type: image/png ");

Then output the image to the browser, imagepng ($ img );

Finally, destroy the image, that is, release the memory occupied by the image storage imagedestroy (img );,

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.