Andmete visualiseerimine CSS graafikute, diagrammide ja muu abil

Hea andmete esitamine on veebitööstuse oluline aspekt, sest see on võti, mis võimaldab külastajatel sisu mõnel sekundil mõista. Mida lihtsam või kiiremini külastajad saavad teie veebisisust aru, seda kõrgem peegeldab teie professionaalsust esitluses. Inimväärse andmete esitamise kriteeriumid peaksid olema lihtsad, kuid kirjeldavad, hästi välja töötatud, kuid suutma säilitada kasutaja huvid, ei võta higi selle sisu seedimiseks, on mugav võrrelda ja lõpuks peaks kasutajal olema võimalus teha otsuseid või sõlmida andmed kergesti. See on nii raske, kui need hullumeelsed kriteeriumid võivad tunduda.

Tänapäeva ametikohal tahame, et te võtaksite oma aega, et nautida erinevaid lähenemisi ilusasse ja ilusasse loomingulised andmete visualiseerimise vahendid, mis põhinevad täielikult CSS / HTML-il. Jah lihtsalt kopeerige ja kleepige see vastavalt oma eelistustele. Need diagrammid võivad olla CSS-ribadiagrammid, mis kuvavad andmeid horisontaalses / vertikaalses vormis, rippmenüüst oma organiseeritud andmetele või isegi joongraafikuid ja pirukaarte!

Sa tahad rohkem? Hoidke kerimist!

Horisontaalne barchart

Lihtne viis statistilise näitaja kuvamiseks selle juurdepääsetava ribakaardi abil, kasutades CSS-i. Baar arvutab kasutatavad väärtusrakud ja sildid. Tabeli päiseid kasutatakse foneetilise tekstiklassi abil

CSSplay

Vöötkaardid on lõplik loend, milles on igas reas määratletud stiile ja klassid. Esimesel graafikul on viga, mis tekib siis, kui väärtused lähevad 100% -ni, mis on teises diagrammis parandatud. Teie viide sisaldab ka lähtekoodi.

Protsent Bargraph

Kasutades CSS-i protsendilaiuse võimeid, luuakse selles juhendis protsendipõhine baari graafik. Horisontaalse tulpdiagrammi abil saate määrata markeri, et liikuda pikkust vasakult paremale või luua vertikaalne graafik, kasutades sama tehnikat ja taasesitades seda mitu korda

Maxdesign

Russ Weakley õpetab looma graafiku, mis põhineb protsendil ja taustapilte kasutades. Koodi ja seotud pilte saab teie projektis kasutamiseks kopeerida ja alla laadida.

Vertikaalne barchart

Looge CSS ja PHP abil vertikaalsed tulpdiagrammid, luues lihtsa nimekirja, mille kõrgus on üksikute ribade pikslites, bar-rühma y-telg ja klass, et kujundada andmekogumid. Eric Meyer õpetab saama samast tehnikast lähtudes muuta bar-graafiks, joongraafiks, teravdatud graafiks ja 3D-graafiks

Pure CSS Linegraph

Line graafikud annavad informatsiooni palju kiiremini kui numbrid. Lugege, kuidas luua HTML-i abil CSS-iga rea ​​graafikut, asendada tekstiga pilt ja kasuta CSS-sprite ja absoluutset positsioneerimist, et saada rea ​​graafik.

Lihtne graafik

Palju lihtsat joongraafi, mis kasutab ainult DHTML-i ja CSS-i ning kus saab graafikule läbipaistva tausta seada. See graafik laadib kiiremini ja seguneb ülejäänud leheküljega.

Mgraph

Seda Ajaxi graafikut kasutatakse aasta andmete esitamiseks iga kuu järgi, kasutades ainult CSS-i ja XHTML-i ning jookseb Firefoxis ja Opera'is

Mitmekolonnilised nimekirjad

Paul Novitski õpetab, et loote käesolevas artiklis CSS abil mitme veeru loendi. Ta arutab paljusid tehnikaid, et saavutada mitme veeru nimekirju, näiteks jagatud nimekirjade ujuvad, HTML-atribuudiga nummerdades neid, CSS-i loodud sisu, pakendades nimekirja XHTML-i, CSS-i jne abil ja lõpuks lisades väikese stiili ja taustapildi mitme veeru saavutamiseks nimekirja.

Bulletgraph

Täppgraafik võrdleb üht mõõdet ühe või mitme muu meetmega ja näitab kvalitatiivset esituste valikut. Need on andmesisestatud saitide jaoks üsna paindlikud. Õppige looma graafiku graafik CSS / HTML abil.

Veerg brauser

CSS abil luuakse veergriba graafik, kus väärtused on näidatud värviliste vertikaalsete ribadena, mis ulatuvad erinevatele kõrgustele vastavalt määratud väärtustele. See graafik annab meile selge ülevaate, sest väärtused on siin otse trükitud. Kasutades CSS-i valikuid, sprite, loendite kujundamist jne, õpige looma õpetusest veergraafikut.

Katkestusgraafik

Alguses oli seisakute graafikul probleem, mis näitas piiratud ekraanipiirkonnas pikki ajavahemikke ja hoidis läbipaistvat sündmuste paigutust, mida selgitas igakuine kalendri paradigma. OnMouseOver () on töökorras ja erinevaid värve kasutatakse erinevate seisakute puhul.

Dünaamiline live CSS-graafik

Live-dünaamiline CSS-graafik, mis kuvab veebiserveri poolt sooritatud ping-i reageerimisaega, loeb andmeid veebiserverist, millel on CSS- ja JavaScript-kood, AJAX-funktsioonid ja graafika libisemine.

Horisontaalne graaf

Vöötgraafik ei pea alati olema bertiline. Samuti saab luua horisontaalse tulpdiagrammi. Selles artiklis luuakse erineva värvivariatsiooniga horisontaalne tulpdiagramm, kasutades klassi „horisontaalne graafik” ja täpsustades graafiku kõrgust CSS-i abil..

Multigraaf

Liiniagramm, mis ei kasuta ühtegi piltide tabelit, luuakse CSS ja DHTML abil, mis laadib kiiremini ja tausta saab muuta läbipaistvaks.

Tootmisplaani graafik

Tootmisplaani graafik luuakse graafikaklassina graafikikonteinerina ja hLine ka vLine eraldusjoonte joonistamiseks. Seda diagrammi kasutatakse sisevõrgu rakendustes. Graafiku laius arvutatakse vastavalt kuvatud päevade arvule ja kõrgusele, kasutades töökohtade arvu.

Sandwichi graafik

Kihi graafik luuakse siis, kui üks riba vöötgraafikus on jagatud paljude kihtide vahel, kus ühe veeru kõrgus võib osutada globaalsele trendile, samas kui ühe kihi kõrgus näitab osa sellest kihist. Looge sellest juhendist CSS-kiht.

Kogutud graafika

Kogutud graafiku puhul kasutatakse andmete esitamiseks definitsiooniloendit, seejärel nullitakse marginaalid ja polsterdus kõikides brauserites sama. Laaditud baaride saamiseks lisatakse teljed ja stiliseeritakse. Selles juhendis õpetatakse täpselt iga detaili.

Lihtne graaf

Baargraafik, mis on loodud CSS ja PHP sans graafika raamatukogu abil ning ilma marginaalide jaoks palju arvutusteta. Polsterdus, mis muudab üsna kergesti kasutatava tehnika mõistmise