Otisni knjiguOtisni knjigu

Vertikalni grafikoni

Grafikon nacrtan promjenom veličine elemenata popisa.

Sjedište: Nacionalni portal za učenje na daljinu "Nikola Tesla"
E-kolegij: Osnove CSS-a
Knjiga: Vertikalni grafikoni
Otisnuo/la: Gost (anonimni korisnik)
Datum: Wednesday, 4. December 2024., 20:29

Sadržaj knjige

Stupčasti grafikoni

Koristeći sličan način prikaza popisa kao što je onaj prezentiran u prethodnoj lekciji možemo postići prezentaciju stupčastih grafikona kao u sljedećem prikazu.

  • 100
  • 80
  • 60
  • 120
  • 90
  • Crtanje grafikona je najkorisnije kad se obavlja s podacima koji se prikupljaju nakon stvaranja stranice (na primjer rezultati anketa), što znači da uključuje sredstva koja vam u ovoj fazi učenja vjerojatno nisu na raspolaganju. Unatoč tome, predlažemo da i ovaj primjer pratite konstruirajući vlastiti primjer jednak ili sličan primjeru iz sljedećih nekoliko lekcija.
    
CARNet

Okvir za grafikon

Prvo ćemo definirati okvir za prikaz grafikona. Grafikon prikazujemo u sloju koji je definiran sljedećim stilom:

#graf {
  color: #fff;
  background: url("images/graph_back.gif");
  background-position: bottom;
  width: 330px;
  height: 180px;
  border: 1px solid #000;
  padding: 0px;
  margin: 0px;
  margin-left: 40px;
  position: relative;
}

Pozadina sloja definirana je sličicom veličine 1x10 piksela. Na vrhu sličice, inače svijetlo sive boje, nalazi se jedan piksel tamne boje. Koristeći ovakvu sličicu za pozadinu, nizanjem dobijemo linije udaljene 10 piksela. Ovdje je prikazana ta sličica uvećana četiri puta:

pozadinska slika

Izgled okvira za grafikon možete vidjeti na sljedećem prikazu:

    
CARNet

Trake grafikona

 

Trake grafikona definiramo kao popis s vrijednostima. Popis je definiran sljedećim CSS-om:

#graf ul {
width: 330px;
height: 180px;
padding: 0px;
margin: 0px;
}
#graf ul li {
position: absolute;
text-align: center;
background-color: #333366;
padding: 0px;
margin: 0px;
width: 30px;
height: 100px;
list-style-type: none;
bottom: 0px;
}

Primjećujete sljedeće:

  • elementi popisa #graf ul li definirani su apsolutnim položajem. Tako smo postigli fleksibilnost pomicanja, jer svakom pojedinom elementu popisa možemo odrediti zaseban položaj.
  • text-align ima vrijednost center, tako da se brojke nađu na sredini trake.
  • background-color postavlja boju trake.
  • bottom – pozicionira (smješta) trake na dno okvira u kojem se nalazi popis.

Osim dodavanja samog popisa u HTML kôd, potrebno je postaviti položaj, te definirati visinu pojedine trake. To radimo sljedećim kôdom:

<ul id="graf">
<li style="left:30px;height:100px">100</li>
<li style="left:90px;height:80px">80</li>
<li style="left:150px;height:60px">60</li>
<li style="left:210px;height:120px">120</li>
<li style="left:270px;height:90px">90</li>
</ul>

U linijskom stilu dodano je svojstvo left, čime se postavlja pomak od lijeve granice sloja, i svojstvo height, kojim se definira visina pojedine trake. Visina u pikselima odgovara njenoj vrijednosti. Konačan izgled grafikona nalazi se u lekciji Stupčasti grafikoni.


CARNet