„pChart“: braižome grafikus ir diagramas su PHP (2)
Nors PHP scenarijaus rezultatas dažniausiai yra HTML puslapis, kuriame vyrauja tekstas, bet, pasitelkus papildomas bibliotekas, galima generuoti tikrai kokybiškus vaizdus, taip pat ir visiems pažįstamas diagramas bei grafikus. Vienas iš tam tinkamų sprendimų – biblioteka „pChart“.
Prisijunk prie technologijos.lt komandos!
Laisvas grafikas, uždarbis, daug įdomių veiklų. Patirtis nebūtina, reikia tik entuziazmo.
Sudomino? Užpildyk šią anketą!
Oficialioje svetainėje per SourceForge.net galima ne tik parsisiųsti klases, bet ir paskaityti apie paskutinius atnaujinimus. Šiuo atveju matome, kad paskutinė versija 1.27 buvo išleista labai seniai – 2008 metais. Tačiau tai neturėtų nuvilti, nes funkcionalumas veikia iki pat dabar, ir esminių pokyčių šiam įrankiui net nelabai ir reikėjo.
Parsisiuntę archyvą iš jau minėto tinklalapio, išarchyvuojame ir patalpiname į serverį. Matome krūvą failų ir penkis katalogus, bet mums šiuo atveju aktualios tik dvi klasės – kataloge „pChart“ patalpintos „pChart.php“ ir „pData.php“. Pirmoji atsakinga už diagramų ir grafikų braižymą, o pastaroji – už duomenų struktūros paruošimą diagramoms. Beje, reikia paminėti, kad „pChart“ naudoja GD bibliotekas, tad pasirūpinkite jų veikimu savo web-serveryje.
Taigi, ką galima nuveikti su pChart? Šiame straipsnyje pabandysime nubraižyti tiesiog paprastą diagramą, o tada pateiksime grafikų, kuriuos galime sukurti su „pChart“, pavyzdžius. Važiuojam.
Paprastas pavyzdys – svetainės lankomumo diagrama
Užduotis – nubraižyti vertikalią lankomumo diagramą, kur prie kiekvienos dienos būtų pavaizduoti unikalių lankytojų (hosts) ir puslapių atvertimų (hits) stulpeliai. Rezultatas turėtų atrodyti maždaug taip:
// įterpiame pChart dvi reikalingas klases
include "pChart/pChart.class";
include "pChart/pData.class";
// sugeneruojame atsitiktinius duomenis ir užpildome masyvą
$series = array();
for($i = 1; $i <= 10; $i++) { if ($i < 10) { $series[0][] = "02.0$i"; }
else { $series[0][] = "02.$i"; }
// $series[0] - kalendorinių dienų masyvas
$hosts = 1000 + rand(-500, 500);
$series[1][] = $hosts;
// $series[1] - "hosts" skaičius
$hits = $hosts * 3 + rand(-100, 100);
$series[2][] = $hits;
// $series[2] - "hits" skaičius: sakykime, daugmaž 3 kartus didesnis už "hosts" }
// patalpiname duomenis į specialų objektą - pData
$data = new pData; $n = 0; foreach($series as $k => $v) {
// kiek stulpelių if(++$n == 1)
{ $keySerie = "$k";
// nurodome, kad grafiko ašyje raktas yra kalendorinės dienos
$ksSize = count($v); // sub-stulpelių skaičius viename stulpelyje
} $data->AddPoint($v, "$k"); }
// užpildome "Series" dalį
$data->AddAllSeries();
$data->RemoveSerie($keySerie);
$data->SetAbsciseLabelSerie($keySerie);
// o dabar - paruošiame pačią diagramą
$chart = new pChart(500,200); // ilgis ir aukštis
$chart->setFontProperties("Fonts/tahoma.ttf", 8);
$chart->setGraphArea(50, 10, 450, 150);
// koks plotas skiriamas pačiai diagramai (neįskaičiuojant skalės)
// braižome skalę
$chart->drawScale($data->GetData(),$data->GetDataDescription(),
SCALE_NORMAL | SCALE_START0, 0, 0, 0, TRUE, 90, 2, TRUE);
// braižome pačią diagramą
$chart->drawBarGraph($data->GetData(),$data->GetDataDescription(),
FALSE, 100); // išvedame rezultatą į ekraną $chart->Stroke();
Štai toks kodas, iš komentarų turėtų būti suprantami pagrindiniai veiksmai, o konkrečių funkcijų aprašymą galima gauti, pastudijavus pačias programavimo klases ir jų aprašymą. Galbūt daugiau aiškumo suteiks tolesni pavyzdžiai. Atkreipkite dėmesį ir į tai, kad tokio skripto pats rezultatas yra PNG failas, kuris atvaizduojamas naršyklėje, t. y. jeigu tame pačiame skripte bandysite dar rašyti kažkokį tekstą, nepavyks – tada vaizduos daug neaiškių simbolių ir nerodys paties paveiksliuko. Sudėtingesnių diagramų pavyzdžiai Šios klasės privalumas yra tai, kad kartu su ja archyve pateikiami ir 26 PHP skriptų pavyzdžiai, kurių rezultatai yra PNG failai – iš to galima aiškiai įsivaizduoti pChart galimybes ir pasirinkti sau tinkamą variantą. O dar geriau yra tai, kad, iš esmės, visas skirtingų grafikų braižymo procesas susieina į kelių funkcijų iškvietimą ir parametrų parinkimą. Pažiūrėkime į pirmą pavyzdį iš pateikiamų su „pChart“. Diagrama atrodo taip:
Žvelgiame į kodą – praleidžiant “nesvarbius” veiksmus, esminis braižymas vyksta su maždaug 20 eilučių kodo, ir visos tos eilutės – pChart funkcijų iškvietimai, kurių metu visas “juodas darbas” padaromas už jus:
$DataSet->SetAbsciseLabelSerie();
$DataSet->SetSerieName("January","Serie1");
$DataSet->SetSerieName("February","Serie2");
$DataSet->SetSerieName("March","Serie3");
$DataSet->SetYAxisName("Average age");
$DataSet->SetYAxisUnit("µs");
// Initialise the graph
$Test = new pChart(700,230);
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->setGraphArea(70,30,680,200);
$Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
$Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($DataSet->GetData(),
$DataSet->GetDataDescription(),
SCALE_NORMAL,150,150,150,TRUE,0,2);
$Test->drawGrid(4,TRUE,230,230,230,50);
// Draw the 0 line
$Test->setFontProperties("Fonts/tahoma.ttf",6);
$Test->drawTreshold(0,143,55,72,TRUE,TRUE);
// Draw the line graph
$Test->drawLineGraph($DataSet->GetData(),
$DataSet->GetDataDescription());
$Test->drawPlotGraph($DataSet->GetData(),
$DataSet->GetDataDescription(), 3,2,255,255,255);
Ir pabaigai – kitų, kiek įspūdingesnių diagramų pavyzdžiai iš pChart pateikiamos kolekcijos:
