Vizualizare de date cu grafice, diagrame CSS și altele

O prezentare bună a datelor este un aspect important în industria web, deoarece este cheia pentru a permite vizitatorilor să înțeleagă conținutul în câteva secunde. Cu cât este mai ușor sau mai rapid ca vizitatorii dvs. să înțeleagă conținutul dvs. web, cu atât mai mult vă reflectă profesionalismul în manipularea prezentării. Criteriile pentru o prezentare decentă a datelor ar trebui să fie simple, dar descriptive, bine elaborate, dar să reușească să mențină interesul utilizatorului, să nu transpire pentru a-și digera conținutul, să compare și în cele din urmă, utilizatorul ar trebui să poată lua decizii sau să încheie cu ușurință datele prezentate. Atât de greu ar putea suna aceste criterii nebunești, este posibil.

În postul de astăzi, vrem să vă luăm pentru o plimbare pentru diferite abordări pentru frumos și instrumente creative de vizualizare a datelor care sunt în întregime bazate pe CSS / HTML. da copiați și lipiți, apoi personalizați-o în funcție de preferințele dvs. Aceste diagrame pot fi grafice de bare CSS care afișează date în formă orizontală / verticală, listă derulantă pentru a vă organiza date sau chiar grafice liniare și diagrame cu pană!

Vrei mai mult? Continuați să derulați!

Orizontal Barchart

O modalitate simplă de a afișa figura statistică ca o prezentare generală cu această diagramă de bare accesibilă utilizând CSS. Bara calculează valorile celulelor și etichetelor utilizate. Antetele de tabel utilizate folosind clasa de text aurala

CSSplay

Diagramele bare sunt o listă definitivă cu stiluri și clase definite în fiecare rând. Prima diagramă are o eroare care apare atunci când valorile se apropie de 100%, care este rectificată în al doilea grafic. Codul sursă inclus pentru referință.

Procentajul barografului

Folosind abilitățile de lățime procentuală ale CSS, în acest tutorial este creat un graf de bare procentual. Într-un grafic orizontal puteți să setați un marcator pentru a deplasa lungimea de la stânga la dreapta sau pentru a produce un grafic vertical utilizând aceeași tehnică și reprodus de mai multe ori

Maxdesign

Russ Weakley vă învață să creați un grafic bazat pe procent și utilizând imagini de fundal. Codul și imaginile legate pot fi copiate și descărcate pentru a fi utilizate în proiectul dvs..

Vertical barchart

Creați grafice de bare verticale utilizând CSS și PHP creând o listă simplă cu înălțimea în pixeli a barei individuale, axa y a grupului de bare și clasa pentru a modela seturile de date. Eric Meyer vă învață să transformați același lucru într-un graf de bare, un grafic în linie, un grafic și un grafic 3D utilizând aceleași tehnici

Pure CSS Linegraph

Graficele de linii furnizează informații mult mai repede decât tabelele cu numere. Aflați cum să creați un grafic liniar cu CSS utilizând HTML, să înlocuiți textul cu imaginile și să utilizați spiritele CSS și poziționarea absolută pentru a obține un grafic liniar.

Linie grafică simplă

Un grafic foarte liniar care utilizează numai DHTML și CSS și unde puteți seta un fundal transparent pentru grafic. Acest grafic se încarcă mai repede și se amestecă cu restul paginii.

Mgraph

Acest grafic Ajax este folosit pentru a reprezenta datele unui an în funcție de fiecare lună, folosind doar CSS și XHTML și rulează în Firefox și Opera

Listele cu mai multe coloane

Paul Novitski vă învață să creați o listă cu mai multe coloane utilizând CSS în acest articol. El discută o mulțime de tehnici pentru a realiza o listă cu mai multe coloane, cum ar fi flotarea listelor divizate, numerotarea acestora cu atributul HTML, generarea conținutului CSS, împachetarea listei cu XHTML, CSS etc și, în sfârșit, adaugă un pic de stil și o imagine de fundal pentru a obține coloana multiplă lista perfectă.

Bulletgraph

Un grafic de glonț compară o singură măsură cu una sau mai multe alte măsuri și afișează intervalul calitativ al performanțelor. Ele sunt destul de flexibile pentru site-urile bazate pe date. Aflați cum să creați un grafic de tip bullet utilizând CSS / HTML.

Coloană bargraf

Un grafic de coloană este creat utilizând CSS, unde valorile sunt afișate în bare verticale colorate, ajungând la diferite înălțimi, în funcție de valorile specificate. Acest grafic ne oferă o idee clară deoarece valorile sunt tipărite direct aici. Folosind selectori CSS, sprite, styling de liste etc., învățați să creați un grafic din coloană din tutorial.

Grafic grafice

Graficul grafurilor inițial a avut o problemă de afișare a unor intervale lungi de timp pe suprafața ecranului limitat și păstrarea aspectului transparent al evenimentelor care a fost clarificat de paradigma calendarului lunar. Funcția onMouseOver () este menținută difuzată și diferite culori sunt utilizate pentru diferite tipuri de evenimente de downtime.

Graficul dinamic CSS live

Un grafic live CSS dinamic pentru a afișa timpul de răspuns al ping-ului executat de un server web citește datele de pe un server web cu cod CSS și JavaScript, funcții AJAX și alunecare grafică.

Bargraful orizontal

Un graf de bare nu trebuie să fie mereu beveric. De asemenea, poate fi creat un grafic orizontal. În acest articol este creat un graf orizontal cu diferite variante de culoare folosind un graf "orizontal" al clasei și specificând înălțimea graficului din marcaj folosind CSS.

multigraf

Un grafic liniar care nu utilizează nici un tabel de imagini este creat cu CSS și DHTML care se încarcă mai repede și fundalul poate fi schimbat ca transparent.

Graficul graficului de producție

Un graf al planului de producție este creat utilizând clasa grafică ca container de grafic și hLine și vLine pentru desenarea liniilor de separare. Acest grafic este utilizat în aplicațiile intranet. Lățimea graficului este calculată în funcție de numărul afișat de zile și de înălțime, utilizând numărul de modificări ale postului.

Graficul grafului

Un graf sandwich este creat atunci când o singură bară într-un graf de bare este împărțită în mai multe straturi, unde înălțimea unei singure coloane poate indica o tendință globală, în timp ce înălțimea unui singur strat indică o porțiune a acestui strat. Creați un grafic sandwich CSS din acest tutorial.

Stacked bargraph

Pentru un grafic stivuit, o listă de definiții este utilizată pentru a prezenta date, atunci margini și umplutură sunt resetate pentru a apărea la fel în toate browserele. Axele sunt adăugate și stilizate pentru a obține barele stivuite. Fiecare detaliu este predat exact în acest tutorial.

Simplu bargraf

Un grafic de bare creat folosind bibliotecile grafice CSS și PHP sans și fără prea multe calcule utilizate pentru margini. Padding făcându-l destul de ușor de înțeles tehnica care a folosit numai