Autor Zpráva
Tomasds
Profil
Mám tabulku, v ní sloupec čísel. Chtěl bych na pozadí buněk graficky znázornit hodnoty stylem položeného sloupcového grafu.
V podstatě chci každou buňku vyplnit dvěma obdélníky ve vypočteném poměru šířek tak, aby obdélníky v součtu zabraly 100% šířky a 100% výšky buňky a přes ně byl samozřejmě text. Lze to nějak?

Jedno řešení bych měl - pomocí css background, ale tam je problém, že tomu obrázku nejde zadat velikost, to znamená, že bych musel pro každou buňku phpkem vyrobit a namalovat extra obrázek, což mi připadá poněkud nefajn.
Cargas
Profil
udelat pomoci CSS obal ... potom vlozit dalsi do obalu s pozadim obrazku ... obalu dat pevnou sirku a druhemu zadat sirku v procentech
Trejpa
Profil
Tomasds
Pokud to generuješ pomocí PHP a znáš přesnou velikost buňky, tak není problém každé buňce přigenerovat atribut style s požadovaným posunem obrázku na pozadí, který překrývá pozadí a v závislosti na background-position ho odkrývá. Takhle. Pro potřeby stylování obsahu ale budeš muset do buněk vložit další element (span), protože buňky potřebují mít vynulovaný padding.
Tomasds
Profil
Trejpa
Princip fungování mně trochu uniká, ale dělá to přesně to co chci, díky moc. Teď to prostě použiju, až bude čas, pokusím se to pochopit :)
Trejpa
Profil
Tomasds
Princip fungování mně trochu uniká
Tak to zkusím vysvětlit trochu blíže:

Předpokladem pro toto zobrazení je pevně definovaná šířka elementu. Pro buňku tabulky je kromě nastavení její šířky třeba jí vynulovat padding a nastavit tabulce table-layout: fixed;, aby se šířka buněk nepřizpůsobovala vnitřnímu textu.

Jelikož pracuješ s PHP, tak není problém vše nastavit do HTML kódu automaticky. V ukázce jsem předvedl nejjednodušší procenta, nicméně můžeš použít i jiné rozsahy než 100, ale potom to musíš přepočítávat. Myšlenka obecného postupu je taková:
1. Předpokládám, že máš nějaký seznam hodnot, které asi budeš měnit.
2. Určíš si velikost buňky, tedy konstantu (třeba v pixelech).
3. Určíš maximum, kterého budou hodnoty nabývat (100 %, nejvyšší z hodnot, nebo součet hodnot). To může být dynamické podle hodnot.
4. Převedeš hodnoty (v buňkách) na procenta - maximum z bodu 3 odpovídá 100 % (pokud se už tedy o procenta nejedná, že).
5. Tato jednotlivá procenta vynásobíš velikostí buňky (bod 2) a zaokrouhlíš.
6. Výsledky z bodu 6 vložíš do jednotlivých buněk jako v příkladu, tedy <td style="background-position: ##px top;">

Co se vlastně děje v CSS:
Kromě již zmíněného zafixování a nastavení rozměrů a vynulování paddingů přichází na scénu pozadí. Na pozadí je použita barva i obrázek. Nejdříve nastavíme barvu pozadí, která odpovídá aktivní části sloupečku. Poté vložíme na pozadí obrázek (v příkladu je bílý, aby splynul s okolím), který nám tu aktivní barvu překryje. Aby ji nepřekrýval vždy, tak mu zakážeme opakování a posuneme ho podle potřeby zleva o požadovaný počet pixelů. A to už mají za úkol právě ty vygenerované styly u buněk.
td {
background-color: lightGreen;    /* barva aktivní oblasti grafu */
background-image: url(bila.gif); /* obrázek v barvě neaktivní oblasti grafu */
background-repeat: no-repeat;    /* nutné, abychom vedle obrázku viděli barvu */
background-position: left top;   /* výchozí nastavení zakrytí */
}

No a to background-position: ##px top; ve style u jednotlivých buněk vlastně říká, o kolik se má obrázek odsunout z jednobarevného pozadí. Místo no-repeat lze u nízkých obrázků použít repeat-x. Obrázek ale vždy musí být široký aspoň jako buňka, jinak bude graf zprava vylézat.

Problém nastane jen s formátováním, protože text buněk je kvůli nulovým paddingům přímo nalepen na její okraje, takže se špatně čte. Řešením je vložit do buněk nějaký element, kterému už odsazení můžeme nastavit:
<td ...><div style=padding:0.3em>12 %</div>
Tomasds
Profil
Trejpa
Vyčerpávající popis :) Díky moc. Mně jen na první pohled nedocvaklo, proč je tam position, když jsem tak nějak předpokládal width. Teď je to jasné.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: