HTML Táblázatok, ábrázoljuk grafikonon
Ebben a részben, megnézzük, hogyan tudjuk a táblázatunkból kinyerni az adatokat és hogyan tudunk belőlük szép grafikonokat készíteni, előre felhívnám a figyelmeteket, hogy ez nem igazán igazodik a HTML5-höz. Ez a verzió amit itt bemutatok, nem egy új technika, de hamarosan kiadják a canvas-os megoldást is. Egyelőre a böngészők felkészültsége miatt, az alábbi változat használatát javaslom.
Eddig a honlapunkon a dinamikus adatábrázolást csak a Flash segítségével tudtuk megvalósítani. (Voltak különböző hegesztési és kazánkovácsolási eljárások, amivel megoldható, de szép csak a Flash segítségével volt, így én azokat nem tekintem megoldásnak.) Nézzük mire lesz szükségünk, hogy elkészítsük az első grafikonunkat.
1. Lépés a szükséges JavaScript és CSS fájlok leszedése
Először is szedjétek le ezt a szépséget: http://code.google.com/p/dwpe/downloads/list (ez egy nagyszerű kis javascript +css -es open license-es kiegészítés, érdemes mélyebben bele túrni!) Vagy az általam már előkészített célfájlokat. Ezután kezdődhet a táblázat kreálás.
2. Lépés készítsünk egy táblázatot.
Vágjunk is bele és készítsünk egy táblázatot, tegyünk bele tetszőleges adatokat. Nálam a példa fájl, látogatottsági adatokból fog állni. Valahogy így néz ki:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>HTML5 Grafikon</title> </head> <body> <table> <caption>Látogatók számának alakulása</caption> <thead> <tr> <td></td> <th scope="col">Január</th> <th scope="col">Február</th> <th scope="col">Március</th> <th scope="col">Április</th> <th scope="col">Május</th> </tr> </thead> <tbody> <tr> <th scope="row">Összes látogató</th> <td>5213</td> <td>11090</td> <td>13690</td> <td>10210</td> <td>9471</td> </tr> <tr> <th scope="row">Visszatérő</th> <td>1138</td> <td>2540</td> <td>4131</td> <td>4388</td> <td>3971</td> </tr> <tr> <th scope="row">Új Látogató</th> <td>4075</td> <td>8550</td> <td>9559</td> <td>5822</td> <td>5500</td> </tr> </tbody> </table> </body> </html>
Táblázat
|
1 2 |
Ha most megnézed a fájlt, akkor láthatod, hogy hogy néz ki! Annyira nem vészes, mondhatnánk. De mindjárt szebb lesz. |
3. Lépés, adjuk hozzá a leszedett fájlokat
A HTML fájlunk fejlécébe tegyük a következőket.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>HTML5 Grafikon</title> <link href="basic.css" type="text/css" rel="stylesheet" /> <link href="visualize.css" type="text/css" rel="stylesheet" /> <link href="visualize-light.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="visualize.js"></script> </head> ...
CSS-el kezelt táblázat
Már most szebb lett a táblázatunk, pedig igazából még nem is csináltunk vele semmit. Aki valóban szép táblázatot szeretne csinálni, annak már ez is elégséges lehet, de mi most ne elégedjünk meg ezzel, tegyük hozzá a beígért grafikont is!
4. Lépés, következzék a Grafikon!
Utolsó lépésként inicializáljuk a visualize.js-t.! A fejlécbe még kerüljön bele a következő rész:
<script type="text/javascript">
$(function(){
$('table').visualize({type: 'line'});
});
</script>
A végeredményt itt megtekintheted.
- type: Lehet: ‘bar’, ‘area’, ‘pie’, ‘line’. Az alapbeállítás: ‘bar’.
Remélem segített azoknak, akik táblázatokkal és grafikonokkal bajlódnak a weboldalukon.
Forrás:
http://code.google.com/p/dwpe/downloads/list
Permissions beyond the scope of this license may be available at http://html5.ugyesen.com.
