CSS grafy

3. listopadu 2005

•

Tyto grafy jsou tvořeny pouze prostředky CSS, tedy s využitím tohoto řešení odpadá dynamické generování grafů jako PHP obrázků. Při potřebě dynamického grafu si vystačíme s vygenerováním několika čísel.

Zde si můžete prohlédnout výsledek

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku A definition list bar chart.

CSS

/* styly pro vodorovný graf */
#graf1 dl
{
width: 400px;
height: auto;
background: #fff;
}
#graf1 dt
{
text-align: center;
}
#graf1 dd
{
margin: 1px 0;
display: block;
width: 400px;
height: 2em;
background: #0a0;
}
#graf1 dd div.popisek
{
float: right;
display: block;
margin-left: auto;
background: #cec;
height: 2em;
line-height: 2em;
text-align: right;
}
#graf1 dd.p670 div.popisek
{
width:33%;
}
#graf1 dd.p67 div.popisek
{
width:93.3%;
}
#graf1 dd.p12 div.popisek
{
width:98.8%;
}
#graf1 dd.p197 div.popisek
{
width:80.3%;
}
#graf1 dd.p26 div.popisek
{
width:97.3%;
}
#graf1 dd.p08 div.popisek
{
width:99.2%;
}
/* styly pro svislý graf */
#graf2 dl
{
background: #fff;
width: 320px;
}
#graf2 dt
{
text-align: center;
}
#graf2 dd
{
margin: 0 1px;
width: 50px;
height: 300px;
background: #40a;
float: left;
}
#graf2 dd div.popisek
{
display: block;
background: #ace;
text-align: center;
font-size: 80%;
}
#graf2 dd.p670 div.popisek
{
height:33%;
}
#graf2 dd.p67 div.popisek
{
height:93.3%;
}
#graf2 dd.p12 div.popisek
{
height:98.8%;
}
#graf2 dd.p197 div.popisek
{
height:80.3%;
}
#graf2 dd.p26 div.popisek
{
height:97.3%;
}
#graf2 dd.p08 div.popisek
{
height:99.2%;
}
div.cl /* čistič */
{
clear: both;
}

XHTML

<html>
<body>
<div id=“graf1″>
<dl>
<dt>Podíl webových prohlížečů – červen 2005</dt>
<dd class=“p670″><div class=“popisek“>IE.6 = 67%</div></dd>
<dd class=“p67″><div class=“popisek“>IE.5 = 6.7%</div></dd>
<dd class=“p12″><div class=“popisek“>Opera = 1.2%</div></dd>
<dd class=“p197″><div class=“popisek“>Firefox = 19.7%</div></dd>
<dd class=“p26″><div class=“popisek“>Mozilla = 2.6%</div></dd>
<dd class=“p08″><div class=“popisek“>NN7 = 0.8%</div></dd>
</dl>
</div>
<div id=“graf2″>
<dl>
<dt>Podíl webových prohlížečů – červen 2005</dt>
<dd class=“p670″><div class=“popisek“>IE.6 = 67%</div></dd>
<dd class=“p67″><div class=“popisek“>IE.5 = 6.7%</div></dd>
<dd class=“p12″><div class=“popisek“>Opera = 1.2%</div></dd>
<dd class=“p197″><div class=“popisek“>Firefox = 19.7%</div></dd>
<dd class=“p26″><div class=“popisek“>Mozilla = 2.6%</div></dd>
<dd class=“p08″><div class=“popisek“>NN7 = 0.8%</div></dd>
<div class=“cl“></div>
</dl>
</div>
</body>
</html>