site logo

Graf hladiny v zásobníku

V řadě článků o vytváření sloupcových a řádkových grafech bude tento poslední. Vychází z ukázky aplikace Spotřeba surovin, kde můžete vidět řadu zásobníků a jejich aktuální stav naplnění. V tomto článku vysvětlím jak se zobrazuje hladina v zásobníku.

Nejdříve připravíme dva obrázky. První bude zobrazovat hladinu zásoby suroviny, podobný jako obrázky pro sloupcové grafy. Druhý obrázek je obrys tvaru zásobníku. Je to průhledný .gif, který má dvě bílé barvy. Jedna bílá (neprůhledná) je vnější okolí obrysu zásobníku, druhá bílá, s jiným indexem barvy, bude vnitřní část zásobníku a tomuto indexu barvy nastavíme plnou průhlednost.

Vlevo vidíme připravené obrázky:
 
1. samostatný základ sloupcového grafu
2. samostatný obrys tvaru zásobníku
3. složený obrázek naplněného zásobníku
4. složený obrázek přeplněného zásobníku


<style type="text/css">
.cont  {position: relative; width: 62px; height: 90px; float: left;}
.level {position: absolute; left: 0; width: 46px; z-index: 0;}
.shape {position: absolute;
        top: 0; left: 0; width: 58px; height: 90px; z-index: 1;}
</style>

<body>

<div class="cont">
<img class="level" src="bar.png" style=" top: 30px; height: 50px;">
<img class="shape" src="shape.gif" />
</div>

<div class="cont">
<img class="level" src="bar.png" style=" top: 0; height: 80px;">
<img class="shape" src="shape.gif">
</div>

</body>

Připravíme si CSS třídu .cont, která slouží jako kontejner pro zobrazení zásobníku. Ta má pozicování relative pro potřeby dalšího kreslení uvnitř kontejneru, float: left, zajistí řazení kontejnerů zleva. Třídy .level a .shape budeme používat uvnitř kontejneru a musí tedy mít nastaveno pozicování absolute. Pomocí třídy .level budeme kreslit obrázek který zobrazí výšku hladiny. Zde uvedeme jen konstantní rozměry left a width, zbývající rozměry top a heigh budeme doplňovat do inline stylu podle vypočtených hodnot. Třída .shape bude sloužit pro kreslení obrysu zásobníku a bude mít vždy stejné rozměry a proto jsou všechny rozměry uvedeny v deklaraci CSS.

HTML sekce obsahuje kód pro kreslení jen prvních dvou zásobníků. Každý zásobník je nakreslen do kontejneru cont. Podle reálných okamžitých hodnot jsou vypočteny hodnoty top a height obrázku bar, které jsou dosazeny do inline stylu. Nakreslený sloupec překryjeme obrysem zásobníku shape. Díky nastavené průhlednosti obrysu zásobníku vytvoříme iluzi zobrazení hladiny.

Pro výpočet hladiny potřebujeme znát maximální limit stavu zásoby pro surovinu. Při dosažení limitu zásoby je zobrazen zásobník zaplněný po horní okraj, při překročení limitu se zobrazí "přeplněný" zásobník. Výpočet hodnot top a height je doplněn o transformaci souřadnic do odpovídající pozice a test na přeplnění, tak aby nebyl překročen grafický obrys zásobníku. Dále lze testovat minimální limit stavu zásoby a při malé zásobě zobrazit jinou barvu sloupce.

Musíme si dát pozor při stanovení grafického měřítka. Nulová hodnota hladiny odpovídá dolní rovině obrázku zásobníku (zde 80 pixelů), nikoli celkové výšce obrázku zásobníku. Do celkové výšky se započítává i stín pod zásobníkem. Horní rovina zásobníku (zde 10 pixelů) odpovídá maximálnímu limitu stavu zásoby suroviny. Grafické měřítko je tedy: efektivní výška 70 pixelů se rovná maximálnímu limitu zásoby.

Doporučuji přísné testy na překročení grafických limitů: top nesmí být záporné a součet top a height nesmí překročit souřadnici dolní roviny zásobníku. Bez testů mohou vznikout obrázky kterými se zesměšníte.

updated 21.05.2006