Histograma (din istoria greacă, aici - o coloană și un gram). schema de coloane, unul dintre tipurile de reprezentare grafică a distribuției statistice a oricărei cantități prin caracteristica cantitativă. ("Marea enciclopedie sovietică").
Astăzi am vrut să scriu o bibliotecă pentru construirea de histograme sau grafice. Aici aici:
Deci, trebuie să creăm o clasă Perl pentru a genera codul html, pentru a construi histogramele. Aspectul diagramelor va fi setat prin CSS.
Intrarea este alimentată de date, sub forma unei trimiteri la matricea hash. Cheile hash-ului sunt pe linia de jos, ca semnături. Valorile sunt numere.
După procesare, trebuie să obținem codul html, care poate fi pus în ordine folosind CSS. Acest cod html ar trebui să reprezinte diagrama, sub forma coloanelor verticale.
utilizați BarChart;
$ g = noul BarChart;
$ g-> setData (
"Ciorchinele" => "20",
"Cheesecakes" => "45",
'Gingerbreads' => '30'
>
);
$ g-> înălțime (200);
$ graf = $ g-> generează;
print $ graph;
Nu voi da codul complet. Puteți descărca această clasă și o puteți înțelege singură. Nu este deloc complicat.
Cum să lucrezi cu asta
- Creați un obiect BarChart
- Transmitem referința la obiect la hash care conține perechile "nume - număr"
- Am setat graficul viitor (implicit 300px)
- Dacă este necesar, dezactivați valorile de ieșire din coloane ($ g-> showValues (0))
- Generați html ($ g-> generați)
- Afișați histograma finită
- Personalizați aspectul, utilizând CSS
Executarea HTML va arăta cam așa:
50 | 180 | 100 |
| chiflă | prăjitură cu brânză | turtă dulce |
După cum puteți vedea, acest marcaj este suficient pentru a controla tipul histogramei prin CSS. Propun propria mea versiune:
.grafic. grafic tr. grafic td border: 0px;
padding: 0px;
margine: 0px;
vertical-aliniere: partea inferioară;
text-align: centru;
>
.grafic de graniță: 1px de argint solid;
>
.graph_col text-aliniere: centru;
>
.graph_col div width: 30px;
fundal-culoare: albastru;
culoare: alb;
margine: 10px 3px;
>
.graph_legend td culoare-fundal: verde;
culoare: alb;
padding: 5px;
>
Încercați să faceți ceva original.
Avantaje și dezavantaje
Dezavantaje: Nu puteți roti histograma pe o parte. Nu puteți crea coloane de culori diferite, deoarece aparțin aceleiași clase CSS. În plus, nu puteți specifica ordinea în care sunt afișate coloanele, deoarece acestea sunt inițial transmise într-un hash care este neordonat. Cu toate acestea, cu o rafinare simplă, acest neajuns poate fi eliminat.
Pentru avantaje este posibil să se clasifice simplitatea utilizării și schimbarea aspectului.
Puteți descărca această clasă și o puteți folosi așa cum doriți.
Link-uri conexe
Google Chart API vă permite să construiți diagrame, sub formă de imagini, fără efort. O mulțime de caracteristici și interfață ușor de utilizat.
Cine mai știe ce biblioteci sau modalități de a construi diagrame? Distribuiți referințele la materiale.