Vizualizacija podatkov s grafi CSS, grafikoni in več

Dobra predstavitev podatkov je pomemben vidik v spletni industriji, saj je ključ, da obiskovalci v nekaj sekundah razumejo vašo vsebino. Lažje ali hitreje bodo vaši obiskovalci razumeli vašo spletno vsebino, višje odraža vašo profesionalnost pri obravnavi predstavitve. Merila za dostojno predstavitev podatkov morajo biti preprosta, vendar opisna, dobro izdelana, vendar ohraniti uporabnikove interese, se ne potiti, da bi prebavila njeno vsebino, primerna za primerjavo in končno, uporabnik mora biti sposoben sprejemati odločitve ali sklepati podatke, ki so predstavljeni brez težav. Tako težko, kot se zdijo ti nenavadni kriteriji, je to mogoče.

V današnjem postu si želimo vzeti vašo vožnjo za različne pristope k lepim in ustvarjalna orodja za vizualizacijo podatkov, ki v celoti temeljijo na CSS / HTML. Da samo kopirajte in prilepite, nato jo prilagodite glede na vaše želje. Ti grafikoni so lahko stolpični grafi CSS, ki prikazujejo podatke v vodoravni / navpični obliki, spustnem seznamu do podatkov o organizaciji ali celo grafov vrstic in tortnih grafikonov.!

Hočeš več? Naj se premikate!

Horizontalni Barchart

Preprost način prikazovanja statistične številke kot pregleda s tem dostopnim stolpičnim grafikonom s pomočjo CSS. Vrstica izračuna uporabljene vrednosti celic in oznak. Glave tabel, ki se uporabljajo v razredu besedilnega besedila

CSSplay

Barski grafikoni so dokončni seznam s stili in razredi, definiranimi v vsaki vrstici. Prva karta ima napako, ki se pojavi, ko se vrednosti približajo 100%, kar se popravi v drugem grafikonu. Izvorna koda je vključena za vašo referenco.

Bargraf v odstotkih

S pomočjo odstotkovne širine CSS-ja se v tej vadnici ustvari barvni graf, ki temelji na odstotkih. V horizontalnem stolpčnem grafikonu lahko nastavite oznako, da potujete po dolžini od leve proti desni ali izdelate navpični graf z uporabo iste tehnike in jo večkrat ponovite.

Maxdesign

Russ Weakley vas uči, da ustvarite graf, ki temelji na odstotkih in uporabi slik ozadja. Povezane kode in slike lahko kopirate in prenesete za uporabo v vašem projektu.

Vertikalni barchart

Ustvarite navpične črte z uporabo CSS in PHP tako, da ustvarite preprost seznam z višino v pikslih posameznih vrstic, osi y skupine in razreda, da slog nastavite. Eric Meyer vas uči, da enako spremenite v stolpični graf, linijski graf, koničast graf in 3D graf z enakimi tehnikami

Čisti CSS Linegraph

Črtni grafi posredujejo informacije veliko hitreje kot tabele s številkami. Naučite se ustvariti linijski graf s CSS-jem z uporabo HTML-ja, zamenjati besedilo s slikami in uporabiti CSS-sprite in absolutno pozicioniranje, da dobite linijski graf.

Simple Linegraph

Preprost linijski graf, ki uporablja samo DHTML in CSS in kjer lahko nastavite transparentno ozadje za graf. Ta graf se hitreje nalaga in združuje s preostalo stranjo.

Mgraph

Ta graf Ajax se uporablja za predstavitev podatkov za eno leto glede na vsak mesec z uporabo samo CSS in XHTML ter teče v Firefoxu in Operi

Seznami stolpcev

Paul Novitski vas uči, da v članku ustvarite seznam z več stolpci z uporabo CSS. On razpravlja o veliko tehnik za doseganje več stolpcev seznamov, kot so plavajoče deljene sezname, številčenje z atributom HTML, CSS vsebino, zavijanje seznama z XHTML, CSS itd. seznam popolnoma.

Bulletgraph

Grafikon z metkom primerja posamezno merilo z enim ali več drugimi ukrepi in prikaže kvalitativni razpon uspešnosti. So precej prilagodljivi za podatkovno usmerjene lokacije. Več o ustvarjanju grafičnega grafikona z uporabo CSS / HTML.

Stolpski graf

Stolpični stolpec se ustvari s pomočjo CSS, kjer so vrednosti prikazane v barvnih vertikalnih stolpcih, ki dosegajo različne višine glede na podane vrednosti. Ta graf nam daje jasno predstavo, ker so vrednosti neposredno natisnjene tukaj. Z uporabo CSS selektorjev, sprites, styling seznamov itd, naučiti ustvariti stolpec graf iz tutorial.

Graf izpadov

Graf izpadov je sprva imel težave pri prikazovanju dolgih časovnih intervalov na omejenem območju zaslona in vodenju pregledne razporeditve dogodkov, kar je pojasnila mesečna paradigma koledarja. OnMouseOver () se še naprej izvaja in različne barve se uporabljajo za različne vrste dogodkov v času izpada.

Dinamični CSS graf

Dinamični grafikon CSS za prikaz odzivnega časa pinga, ki ga izvaja spletni strežnik, bere podatke s spletnega strežnika s kodo CSS in JavaScript, funkcijami AJAX in drsenjem grafa..

Vodoravni bargraf

Črtni graf ne sme biti vedno navidezen. Prav tako lahko ustvarite vodoravni stolpčni graf. V tem članku je izdelan horizontalni stolpec z različnimi barvnimi variacijami z uporabo "horizontalnega grafa" razreda in določanjem višine grafa iz oznake z uporabo CSS.

Multigraph

Linijski graf, ki ne uporablja nobene tabele slik, se ustvari s CSS in DHTML, ki se nalagata hitreje in se ozadje lahko spremeni kot pregledno..

Graf proizvodnje

Graf produkcijskega načrta je izdelan s pomočjo grafikona kot grafa in hLine tudi vLine za risanje ločilnih črt. Ta graf se uporablja v intranetnih aplikacijah. Širina grafa se izračuna glede na prikazano število dni in višino z uporabo števila sprememb opravila.

Graf sendviča

Graf sendviča se ustvari, ko je ena vrstica v stolpčnem grafu razdeljena na več plasti, kjer višina posameznega stolpca lahko kaže globalni trend, medtem ko višina posamezne plasti označuje del te plasti. Ustvarite grafikon CSS sendvič iz te vadnice.

Zložen stolpec

Pri zloženem grafu se za predstavitev podatkov uporablja seznam definicij, nato pa se robovi in ​​oblazinjenje ponastavijo, da se prikažejo enako v vseh brskalnikih. Osi se dodajo in stilizirajo, da dobijo zložene palice. Vsaka podrobnost se natančno poučuje v tem vodiču.

Preprost bargraf

Črtni graf, izdelan s pomočjo CSS in PHP sans grafične knjižnice in brez veliko izračunov, ki se uporabljajo za robove. Oblazinjenje je zelo enostavno za razumevanje tehnike, ki se uporablja samo