Hisztogrammá perl html css
Hisztogram (a görög histos, itt -. Pole és egy gramm.). bar chart, az egyik típusú grafikus képek a statisztikai eloszlás bármilyen mennyiségben változókat. ( „Nagy Szovjet Enciklopédia”).
Ma akartam írni egy könyvtár hisztogram vagy oszlop diagramok. Itt ilyen van:
Tehát, létre kell hoznunk Perl-osztály kialakulása egy html-kódot hisztogram. Megjelenése diagramok állítja CSS segítségével.
A bemeneti adatot szolgáltatott, mint a referencia, hogy egy hash tömb. A kulcsok a hash a lényeg, az aláírásokat. Értékek - számokat.
A kezelés után, akkor kell, hogy a html-kódot, amely lehet tenni annak érdekében, segítségével CSS. Ez html-kód egy diagram formájában függőleges oszlopokban.
használja oszlopdiagram;
my $ g = new oszlopdiagram;
$ G-> setData (
'Bun' => '20',
'Cheesecake' => '45',
'Mézeskalács' => '30'
>
);
$ G-> magassága (200);
my $ gráf = $ g-> generál;
print $ gráf;
A teljes kód nem eredményezi. Akkor töltse le ezt osztályban, és derítse ki magát. Ő nem bonyolult.
Hogyan működik ez
- Hozzon létre egy objektum osztály oszlopdiagram
- Elhaladunk egy objektum hivatkozás egy hash, amely egy pár „név - a szám a”
- Állítsa vyostu következő ábra (ez az alapértelmezett 300px)
- Ha szükséges, tiltsa le a kimeneti értékek az oszlopok ($ g-> showValues (0))
- Létrehoz html ($ g-> generál)
- Levezetjük kész hisztogram
- Testreszabható megjelenés, CSS
HTML kimenet így néz ki:
50 | 180 | 100 |
| konty | sajttorta | mézeskalács |
Mint látható, ez az elrendezés elég, hogy ellenőrizzék a megjelenése a hisztogram segítségével CSS. Ajánlatok a saját verzióját:
.gráf. grafikon tr. grafikon td átnyúló: 0px;
padding: 0px;
margin: 0px;
függőleges-align: alsó;
text-align: center;
>
.grafikon határ: 1px tömör ezüst;
>
.graph_col text-align: center;
>
.graph_col div szélesség: 30px;
background-color: blue;
szín: fehér;
margin: 10px 3px;
>
.graph_legend td background-color: green;
szín: fehér;
padding: 5px;
>
Megpróbál tenni valamit az eredeti.
Előnyök és hátrányok
Hátrányok: Nem lehet bekapcsolni a hisztogram az oldalon. Nem lehet, hogy az oszlopok a különböző színek, mivel tartozik az ugyanabban a CSS-osztály. Ezen felül, akkor nem lehet beállítani a rendelést kimeneti oszlopok, mivel kezdetben át a hash, hogy rendezetlen. Azonban egy egyszerű finomítás, ez a hátrány kiküszöbölhető.
Az előnyök sorolható a könnyű használat és a változás a megjelenés.
Akkor töltse le ezt osztályba, és használja azt, amit szeretnék.
Linkek erre a témára
Google chart API lehetővé teszi, hogy építeni grafikonok formájában képeket könnyedén. Sok funkciók és felhasználóbarát felület.
Ki tudja még milyen könyvtárak vagy módon építeni a diagram? Link megosztása anyagok.