site logo

Jednoduchý graf pomocí CSS

Tento způsob kreslení grafu vznikl při přípravě protokolu měření rozměrů, kde bylo potřeba celý protokol uložit do jednoho souboru .html bez dalších pomocných obrázkových souborů. Takový html soubor je možné odeslat jako přílohu v mailu zákazníkovi. V protokolu byly grafy využity pro kreslení histogramů hodnot jednotlivých měřících bodů.

 
 
 
 
 
 
 
 
 
 
 
 

Vlevo vidíte příklad upraveného grafu ze zmiňovaného protokolu. Kreslení sloupců je pomocí CSS parametrů příkazu border-left. Server doplní vypočtené hodnoty border do in line stylu (červená část kódu), navíc testujeme nulovou hodnotu, kterou zobrazíme světlou šedou barvou se šířkou okraje 1 pixel. V konkrétním případě histogramu takto znázorníme, že tomto intervalu nebyla změřena žádná hodnota. Dále následuje ukázka html kódu. Je potřeba upozornit na trvdou mezeru ( ), bez ní by prázdný div nebyl vykreslen. Kvůlivá této tvrdé mezeře musíme nastavit i dostatečně malý font tak aby byl menší než výška prvku div. Jednotlivé části grafu jsou pak zabaleny do vnějšího tágu div.

...
<style type="text/css">
.gr {font: 4px Arial; height: 8px; width: 100%; margin-bottom: 1px;}
</style>
</head>

<body>
...
<div style="width: 32px; float: left;">
...
<div class="gr" style="border-left: 1px solid #ccc;">&nbsp;</div>
<div class="gr" style="border-left: 8px solid #666;">&nbsp;</div>
<div class="gr" style="border-left:12px solid #666;">&nbsp;</div>
...
</div>

</body>
</html>
jaro 40%
léto 30%
podzim 10%
zima 20%

Podobný graf by mohl posloužit např. pro grafické vyjádření výsledků hlasování v anketě. Pak je potřeba jej doplnit o textové údaje. Zde defaultní zarovnání vlevo způsobí, že graf i text se zobrazuje stejně v IE, FF, Opeře, ale výsledek není příliš efektní. Jak tedy zarovnat text? Jednoduchý způsob jak zarovnat graf i text do bloku, zachovat použití jednoho vnějšího tágu div a přijatelně jednoduchý html kód jsem bohužel nenašel.

 
jaro 40%
 
léto 30%
 
podzim 10%
 
zima 20%

Zkusíme tedy vytvořit graf pomocí tolik zatracovaných tabulek. Do prvního sloupce nakreslíme graf, do druhého sloupce napíšeme text, který již můžeme zarovnat vlevo, nebo vpravo. Konečně IE , FF, Opera zobrazují shodně graf i text. Následuje ukázka kódu s použitím tabulky.

...
<style type="text/css">
.gr2 {font: 12px/16px Arial; margin-bottom: 1px;}
.tx2 {font: 12px/16px Arial; text-align: right; padding-right: 4px;}
</style>
</head>

<body>
...
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="gr2" style="border-left: 40px solid #6f0;">&nbsp;</div>
</td>
<td class="tx2">jaro 40%</td>
</tr>
...
</table>

</body>
</html>

Kreslení grafu pomocí CSS je vhodné v případech kdy nechceme, nebo nemůžeme použít pomocné prvky img. Není vhodné pro složitější případy, kdy se lehce dostaneme do problémů způsobených s počítáním rozměru prvku div, do kterého kreslíme graf. Problém způsobuje odlišný IE box model.

updated 01.05.2006