Cum de a face o diagramă - html de laborator

Grafic - o reprezentare grafică a datelor forme geometrice (linii, coloane, sectoare, etc.), vă permite să comparați rapid valorile raportului. HTML este creat pe un grafic cu bare orizontal sau vertical. Dacă utilizați SVG-grafic, puteți obține diagrame și grafice de prezentare incredibile, atât în ​​d3.js.

Cursurile ridică de multe ori problema de a crea un HTML columnare simplu și CSS înseamnă diagramă. Pentru un astfel de program este containerul necesar, cu condiția ca acesta cu clasa și elementele individuale .graph coloane, lăsați-l să fie un element de div cu clasa .item.

Cum de a face o diagramă orizontală

Pentru grafică orizontală nevoie de un minim de efort. element - ocupă 100% din lățimea .graph, atunci este suficient pentru a defini lățimea fiecărei coloane, culoarea de fundal și text în interiorul ei, problema este rezolvată. Culoarea de fundal poate fi luată în stiluri este HTML-element în aceeași înălțime punct (adică grosimea coloanei, este toate aceleași coloane), dar lățimea este întotdeauna prescrie în interior.

Cum de a face o diagramă de verticală

Pentru grafic cu bare verticale trebuie să aplice CSS proprietăți suplimentare. Pot exista diferite variante de aspect, dar adăugarea .item proprietățile de afișare cele mai acceptabile viteză văzut: inline-block. În acest caz, lățimea va trebui să facă același lucru și să stea în fișierul stil, sau cap, iar înălțimea de fiecare punct de timp pentru o anumită coloană.