Cum se face un grafic în php. Creați o diagramă circulară. Crearea unui grafic cu linii folosind biblioteca GD

Există două moduri de a crea grafice în PHP. Puteți să-l desenați singur sau să folosiți o bibliotecă. Vă sugerez să învățați cum să creați singur diagrame. În primul rând, pentru că bibliotecile bune sunt plătite. În al doilea rând, atunci când utilizați orice bibliotecă, sunteți limitat de funcționalitatea acesteia. Este mai bine să desenați singur graficele.

În primul rând, să ne uităm la cea mai simplă opțiune. Există o matrice care conține numărul de utilizatori care s-au înregistrat pe site în 5 zile.

Să afișăm această matrice pe pagină sub forma unui grafic. Mai întâi, să desenăm axele de coordonate.

Comentarii:

3 - creați o imagine

7, 8 - axele x și y

9-13 - crestături pe axa x

14-18 - numere pe axa x

19, 20 - crestături pe axa y

21, 22 - numere pe axa y

Desenul ar trebui să arate astfel:

Pentru a desena o linie pe un grafic, trebuie să găsiți puncte pe ea de-a lungul cărora va fi trasată linia. În practică, puteți găsi imediat un punct și trageți o linie de-a lungul acestuia. Dar pentru a face exemplul mai clar, vom împărți problema în două părți. Mai întâi, să găsim toate punctele, apoi să desenăm un grafic pe baza lor. Pentru a face acest lucru, vom crea o matrice bidimensională, care va conține coordonatele x și y ale fiecărui punct. Pentru a găsi coordonatele, avem nevoie de un punct de referință. Acesta este punctul în care se intersectează axele de coordonate. În desenul nostru are coordonatele x: 50, y: 250 pixeli. Pentru a determina poziția fiecărui punct, trebuie să utilizați scara graficului. În exemplu, am stabilit noi înșine scara. Pe axa x, sunt creați 100 de pixeli pentru fiecare zi. Prima zi este la 100 de pixeli distanță de origine, a doua este la 200 de pixeli distanță și așa mai departe. Aceasta înseamnă că coordonata x pentru prima zi este 50 + 100 = 150. Pentru a doua, 50 + 200 = 250.

Pe axa y sunt alocați 100 de pixeli pentru fiecare 10 utilizatori. Aceasta înseamnă pentru un utilizator - 10 pixeli. Este necesar să țineți cont de faptul că axa y a imaginii este îndreptată în jos, ceea ce înseamnă că nu trebuie să adăugați valoarea la punctul de referință, ci să o scădeți. În prima zi, pe site s-au înregistrat 2 vizitatori. Coordonata pentru această valoare este 250 - (2 * 10) = 230. Pentru a doua zi, 250 - (7 * 10) = 180. Astfel, matricea cu coordonatele punctelor este următoarea:

Graficul arată astfel:

Am considerat cea mai simplă opțiune pentru construirea unui grafic. Știam dinainte numărul de zile și numărul maxim de utilizatori. De aceea am ales chiar eu scara graficului. Dar, de obicei, aceste date pot fi diferite și scara trebuie calculată. Și graficul în sine arată puțin diferit. Suntem obișnuiți cu faptul că axele de coordonate încep de la zero. Dar pentru ușurința afișării, uneori această regulă nu este respectată. Axa x nu începe de la 0, ci de la 1, astfel încât să nu existe stânga liniei spațiu gol. Și axa y este afișată astfel încât toate valorile să se potrivească pe grafic. De exemplu, dacă valoarea minimă este 60 și valoarea maximă este 70, atunci axa y conține acel interval. Să luăm în considerare crearea unui astfel de grafic.

În exemplu, axa x are 570 de pixeli lungime. Trebuie împărțit în segmente egale pentru fiecare zi. Axa x nu începe de la 0, ci de la 1. Prin urmare, nu va exista niciun segment între 0 și 1 și numărul de segmente devine cu 1 mai mic. Dacă sunt 5 zile, atunci primești 4 segmente. Formula de calcul a lungimii unui segment este:

lungime = lungimea axei / (număr de zile - 1)

Numărul poate fi o fracție, deci rezultatul trebuie rotunjit în jos.

570 - 50 este lungimea axei x. Depinde de dimensiunea imaginii.

Facem axa y astfel încât toate valorile să se potrivească. Trebuie să obțineți valorile minime și maxime. Acestea ar trebui să ocupe întreaga înălțime a graficului. Cunoscând intervalul, putem calcula câți pixeli ar trebui să corespundă unui utilizator din grafic.

interval = maxim - minim

lungime = lungimea axei/gamă

Numărul rezultat trebuie, de asemenea, rotunjit.

Crearea unui contor grafic de vizite

O caracteristică importantă a lucrului cu modulul GD este că scriptul care generează o nouă imagine nu ar trebui să scoată altceva decât imaginea în sine (adică nu ar trebui să conțină apeluri la echo, printf și funcții similare). Ulterior, imaginea generată de scriptul PHP este afișată de browser prin specificarea adresei URL a acestui script ca sursă de date, de exemplu, .

Crearea unui nou desen în PHP începe fie cu crearea unei noi „pagini” goale (pânză) pentru desen, fie prin încărcarea și modificarea unei imagini existente. Dar înainte de a începe procesul de retragere informatii grafice, trebuie să-i selectați formatul ( tip MIME) prin apelarea funcției header(str). De exemplu, pentru format PNG trebuie să utilizați următorul cod:

header("Tipul conținut: imagine/png");

În continuare, pentru a crea o zonă pentru desen, trebuie să apelați funcția int imagecreate (int x_size, int y_size), căreia îi treceți lățimea și înălțimea (în pixeli) imaginii generate ca parametri x_size și respectiv y_size; funcția va returna identificatorul zonei de desen create. Dacă dorim să luăm ca bază o fotografie existentă, atunci, în funcție de formatul acesteia, trebuie să apelăm funcția imagepng, sau imagejpeg, sau imagegif, trecând numele fișierului imagine ca parametru. Pentru a afișa text, există o funcție int imagestring(int im, int font, int x, int y, string s, int col), care trebuie transmisă: identificatorul zonei de desen, dimensiunea fontului (1-5), coordonatele X de începutul textului, Y coordonează începutul textului, textul în sine și respectiv culoarea textului. Pentru a determina culoarea, se folosește o construcție a formei

$white=ImageColorAllocate($im, 255, 255, 255)

Ultimii trei parametri numerici sunt componentele RGB ale culorii necesare. Dar, deoarece este oarecum irațional să le specificați de fiecare dată, ar trebui să creați un fișier include cu definiții ale culorilor principale colors.inc:

După ce ne-am desenat imaginea folosind GD, aceasta trebuie să fie afișată în browser. Pentru a face acest lucru, în funcție de formatul imaginii, trebuie să apelați una dintre funcțiile: imagepng(int im [, string filename]) sau imagejpeg (int im [, string filename [, int quality]]), trecând identificatorul de imagine ca parametru. Dacă specificați un nume de fișier în plus față de identificatorul zonei de desen, imaginea va fi salvată pe disc sub acest nume). După ce am terminat de lucrat cu desenul, trebuie să eliberăm memoria pe care o ocupă. Funcția imagedestroy (int im) este utilizată în acest scop. Să ne uităm la lucrul cu aceste funcții folosind un exemplu.

Mai întâi, să creăm șabloane pentru antetul și subsolul documentului HTML, pe care le vom folosi pentru a nu aglomera codul PHP cu constructe HTML:

Lucrul cu grafica in php

Să presupunem că vrem să creăm un contor grafic de vizite și avem un fișier șablon în care trebuie să „adăugăm” numărul de vizite. S-ar putea să arate așa.

Apoi, scriptul care plasează datele vizitelor în șablonul de contor poate arăta astfel (numărul de vizite în sine este omis):

Scriptul pentru afișarea contorului ar putea fi astfel:

Imaginea va conține textul introdus (Figura 4).

figura 4

Voi spune câteva cuvinte despre alte funcții din biblioteca GD concepute pentru lucrul cu text. itringUp() afișează textul pe verticală; ImageChar() și ImageCharUp() scot un singur caracter; ImageFontHeight() și ImageFontWidth() returnează înălțimea și lățimea fontului. Ultimele două funcții sunt utilizate în exemplul următor, în care o linie de text este subliniată cu o linie (funcția ImageLine desenează linii la coordonatele date):

Rezultatul scriptului este prezentat în Figura 5.

Figura 5

Desigur, pe lângă linii, puteți desena și alte forme folosind GD. În exemplul următor, vom folosi funcția ImageFilledRectangle() pentru a afișa steagul francez în fereastra browserului. Funcția este concepută pentru a desena dreptunghiuri umplute cu o anumită culoare. Mai întâi, să umplem întregul desen cu alb, apoi să desenăm dreptunghiuri roșii și albastre:

În Figura 6 puteți vedea rezultatul muncii noastre.

Figura 6

PHP vă permite să desenați alte tipuri de poligoane. Există o funcție numită ImagePolygon() în acest scop. Următorul exemplu afișează un pentagon. Următoarele informații sunt transmise acestei funcție ca parametri (cu excepția descriptorului de imagine și a culorii liniei): numărul de vârfuri (în cazul nostru, cinci) și o matrice de coordonate ale punctelor care sunt vârfuri. Rezultatul scriptului este prezentat în Figura 7.

Figura 7

Același script folosește o altă funcție care nu a fost menționată mai devreme - ImageFillToBorder(). Este folosit pentru a umple o zonă limitată de o anumită culoare (în cazul nostru, linia albastră a poligonului).
Funcția ImageArc() poate desena arce și cercuri. Permiteți-mi să vă dau un mic exemplu (vezi Figura 8):

figura 8

Schimbând valorile variabilelor $width și $height, puteți desena ovale, iar prin modificarea unghiurilor, puteți afișa diferite tipuri de arce.

Biblioteca GD vă permite nu numai să desenați imagini, ci și să le folosiți pe cele gata făcute. Să luăm în considerare o situație foarte reală: designerul intern al companiei dvs. a dezvoltat aspectul butoanelor pentru un site web și trebuie să plasați mai multe butoane cu același design și legendele pe pagină.
Biblioteca GD include funcții precum ImageCreateFromGIF(), ImageCreateFromJPEG() și ImageCreateFromPNG(). Acestea vă vor ajuta în cazurile în care trebuie să creați o nouă imagine pe baza uneia existente. Să avem un fișier button.gif (Figura 9), care conține un design ingenios de buton pentru site. Mai jos este codul PHP care face butoane gata făcute pe baza acestui fișier. Observați cum sunt utilizate dimensiunile butonului, fontului și liniilor de text pentru a calcula coordonatele de poziție ale titlurilor. Aici, valoarea variabilei $caption este luată ca legenda pentru buton, care este transmisă scriptului din exterior:

figura 9

Funcțiile iX() și iY() returnează lățimea și, respectiv, înălțimea imaginii. Există, de asemenea, o funcție Getiize() care poate fi utilizată pentru a determina dimensiunea și tipul unei imagini.
În sine, scriptul de mai sus nu are prea multă valoare practică, dar poate fi folosit în orice pagină HTML prin SSI sau așa cum este descris în următorul cod: