site logo

Řádkový graf plánu výroby

Následující graf je použit v ukázkách Plán výroby a Protokoly výroby. V druhé ukázce je graf mírně odlišný, zobrazuje skutečně vyráběný sortiment neobsahuje kalendářní část, má proměnlivou šířku a je součástí grafu plnění plánu.

Na příkladě řádkového grafu si schematicky znázorníme jak správně seřadit jednotlivé prvky grafu a jaký styl jim přiřadit.

 

<div style="position: relative; ...">
ukázka textu
<img style="position: absolute; ..." src="...">
<div  style="position: absolute; ...">ukázka textu</div>
</div>

Celý graf uzavřeme do bloku, kterému dáme styl position: relative. Tento blok slouží jako kontejner pro kreslení našeho grafu. Dovnitř kontejneru můžeme vkládat další prvky, které mají přiřazený styl position: absolute.

 

Hodnoty stylu top a left absolutních prvků uvnitř kontejneru se vztahují k levému hornímu rohu kontejneru. Absolutní prvky pak mohou překročit hranice kontejneru a mohou se i překrývat. Pak ale mějte na paměti, že absolutně pozicované prvky se vykreslí vždy nahoře a mohou tak překrývat okolní prvky nežádoucím způsobem.

Absolutní prvky by měly mít stanoveny všechny rozměry: top, left, height, width. Některé rozměry se počítají podle aktuálních hodnot z databáze a liší se pro každý prvek grafu. Tyto rozměry jsou uvedeny v inline stylu. Ostatní rozměry které jsou konstantní (zde výška), mohou být uvedeny v sekci deklarace CSS tříd.

Kontejner je možné umístit v podstatě kdekoli na stránku díky jeho pozici relative. Může být obtékán textem vlevo, nebo vpravo, centrován do středu šířky stránky, nebo umístěn např. do tabulky.

 

8
Po
9
Út
10
St
11
Čt
12
13
So
14
Ne
15
Po
16
Út
17
St
18
Čt
19
20
So
21
Ne
F51fn06SME
F28fn08LPDH
F66re03LPDH
STOP

Náš příklad zobrazuje plán výroby zkrácený na 14 dní. Horní část je kalendář, dolní část je plán. Svislý posun řádků zdůrazňuje změnu a vytvoří dostatek místa pro název sortimentu.


<style type="text/css">
.graph {position: relative; width: 420px; height: 132px;}
.hLine {position: absolute; left:0; height: 1px; width: 420px; z-index:1;}
.vLine {position: absolute; top: 0; height: 132px; width: 1px; z-index:1;}
.bar   {position: absolute; height: 20px; z-index: 2;}
.tit   {position: absolute; height: 20px; z-index: 3; text-align: left;}

.Dwhite, .Dgray, .Dpink {position: absolute;
     top: 0; width: 29px; height: 132px; color: #000; text-align: center;}
.Dwhite {background-color: #fff;}
.Dgray  {background-color: #eee;}
.Dpink  {background-color: #fde;}
</style>

<body>

<div class="graph">

<!-- calendar section -->
<div class="Dwhite" style="left: 0;">8<br />Po</div>
<div class="Dgray"  style="left: 30px;">9<br />Út</div>

<!-- lines section -->
<img class="hLine" style="top:  32px;" src="pix.png">
<img class="vLine" style="left:210px;" src="pix.png">

<!-- graph section -->
<img class="bar" style="left: 0; top: 50px; width: 60px;" src="bar.png">
<div class="tit" style="left: 0; top: 52px;">F51fn06SME</div>

<img class="bar" style="left: 60px; top: 67px; width: 180px;" src="bar.png">
<div class="tit" style="left: 60px; top: 69px;">F28fn08LPDH</div>

...
</div>

</body>

V sekci CSS je jen část potřebná pro kreslení grafu. Třída .graph je kontejner grafu. hLine a vLine jsou pro kreslení oddělovacích, pomocných čar. Pomocí třídy .bar kreslíme obrázek grafu a pomocí třídy .tit přidáme název sortimentu. Třídy .Dwhite, ... jsou pro kreslení a popis kalendáře.

Sekce CSS (jen část pro graf) je součástí kódu stránky, proto můžeme dynamicky doplnit některé rozměry platné pro celý graf. Podle počtu zobrazených dnů určíme šířku celého grafu, podle počtu změn sortimentu (událostí) vypočteme celkovou výšku grafu. Tyto rozměry umístí serverový skript přímo do sekce CSS tak, aby nemusely být opakovány v inline definicích stylu. Zde je předdefinován celý rozměr kontejneru, rozměry pomocných čar a výška kalendářových prvků.

HTML kód. Nejdříve definujeme kontejner grafu (třída graph). Následuje kreslení kalendáře (v kódu jsou uvedeny jen první dva dny). Dále kreslíme pomocné čáry tj. oddělení částí kalendáře a plánu, a oddělení týdnů. Nakonec nakreslíme náš graf (uvedeny jsou jen dva řádky grafu). Podle uvedeného pořadí se budou jednotlivé prvky grafu překrývat. To je pojištěno ještě pomocí stylu z-index u příslušných prvků.

Řádky grafu jsou kresleny následovně: obrázek umístíme do vypočtených souřadnic left a top a přidáme vypočtenou délku trvání width. Přes obrázek umístíme do stejných souřadnic text (název sortimentu). Pro lepší čitelnost je název umístěn o 2 pixely níže. Souřadnice zadáváme vždy v pixelech (zaokrouhleno na int), jiné jednotky mohou způsobit problémy.

V ukázce Plán výroby je výpočet výšky grafu složen z počtu přestaveb v uvedeném období, počtu poznámek a počtu zobrazovaných výrobních linek. Dotaz do databáze a výpočty celkového rozměru grafu musí být provedeny před zahájením přípravy HTML kódu na serveru, aby bylo možné doplnit část CSS do hlavičky. Při výstupu HTML kódu se tytéž databázové záznamy prochází znovu pro doplnění inline stylů.

updated 08.05.2006