Tietojen visualisointi CSS-kaavioita, kaavioita ja muuta

Hyvä tietojen esitys on tärkeä osa web-teollisuutta, koska se on avain, jonka avulla kävijät voivat ymmärtää sisältösi muutamassa sekunnissa. Mitä helpommin tai nopeammin kävijät saavat Web-sisällön, sitä suurempi heijastaa ammattitaitoasi esityksen käsittelyssä. Ihmisarvoisen esitystavan kriteerit pitäisi olla yksinkertaisia, mutta kuvailevia, hyvin laadittuja, mutta niiden on pystyttävä säilyttämään käyttäjän kiinnostus, ei hikoilua sen sisällön sulattamiseen, kätevää vertailua varten ja lopuksi, käyttäjän olisi voitava tehdä päätöksiä tai tehdä vaivatta. Niin kova kuin nämä hullut kriteerit saattavat kuulostaa, se on mahdollista.

Nykypäivän viestissä haluamme viedä sinut kyytiin eri lähestymistapoihin kauniiseen ja luovien tietojen visualisointityökalut, jotka perustuvat täysin CSS / HTML: ään. Joo kopioi ja liitä sitten ja muokkaa sitä omien mieltymysten mukaan. Nämä kaaviot voivat olla CSS-pylväsdiagrammeja, jotka näyttävät tiedot vaakasuorassa / pystysuorassa muodossa, pudotusvalikosta järjestelytiedoille tai jopa Linjakaavioita ja ympyräkaavioita!

Haluatko lisää? Jatka vierittämistä!

Vaakasuuntainen viivakartta

Yksinkertainen tapa näyttää tilastoluku yleiskatsauksena tämän saatavilla olevan kaavion avulla käyttämällä CSS: ää. Palkki laskee käytetyt solut ja tarrat. Taulukon otsikot, joita käytetään ääni-tekstiluokan avulla

CSSplay

Pylväskaaviot ovat lopullinen luettelo, joka sisältää kussakin rivissä määritellyt tyylit ja luokat. Ensimmäisessä kaaviossa on virhe, joka ilmenee, kun arvot ovat lähempänä 100%, joka korjataan toisessa kaaviossa. Lähdekoodi sisältyy viitteellesi.

Prosenttiosuus Bargraph

Käyttämällä CSS: n prosenttileveysominaisuuksia luodaan tässä oppaassa prosentteihin perustuva bar-kaavio. Vaakapalkkikuviossa voit asettaa merkin, joka kulkee pituutta vasemmalta oikealle tai tuottaa pystysuuntaisen kaavion käyttämällä samaa tekniikkaa ja toistamalla sitä useita kertoja

Maxdesign

Russ Weakley opettaa luomaan kaavion, joka perustuu prosenttiosuuteen ja käyttämällä taustakuvia. Koodit ja linkitetyt kuvat voidaan kopioida ja ladata käytettäviksi projektissa.

Pystysuuntainen barchart

Luo pystysuora palkkigrafiikka käyttäen CSS: ää ja PHP: tä luomalla yksinkertainen luettelo, jossa on korkeus yksittäisten palkkien pikseleinä, bar-ryhmän y-akseli ja luokka dataryhmien tyylittämiseksi. Eric Meyer opettaa sinut muuttamaan viivakaavioon, viivakaavioon, terävään kaavioon ja 3D-kaavioon käyttäen samaa tekniikkaa

Pure CSS Linegraph

Linjakaaviot antavat tietoa paljon nopeammin kuin numeroita sisältävät taulukot. Opi luomaan viivakaavio CSS: n avulla HTML: llä, korvaamaan tekstin kuvilla ja käyttämään CSS-spriittejä ja absoluuttista sijaintia saadaksesi rivikuvion.

Yksinkertainen Linegraph

Paljon yksinkertainen viivakaavio, joka käyttää vain DHTML: ää ja CSS: ää ja jossa voit määrittää läpinäkyvän taustan kaavioon. Tämä kaavio lataa nopeammin ja sekoittuu muuhun sivuun.

Mgraph

Tätä Ajax-käyrää käytetään kuvaamaan vuoden tiedot kunkin kuukauden mukaan käyttäen vain CSS- ja XHTML-tiedostoja, ja se toimii Firefoxissa ja Opera-ohjelmassa

Monipuoliset luettelot

Paul Novitski opettaa luomaan monen sarakkeen luettelon käyttämällä CSS: ää tässä artikkelissa. Hän keskustelee monista tekniikoista, joilla saavutetaan monipylväsluettelot, kuten hajotusluetteloiden kelluva, numerointi HTML-attribuutilla, CSS: n tuottama sisältö, listaaminen XHTML: llä, CSS: llä jne. Ja lopuksi lisätään pieni muotoilu ja taustakuva monipylvään saavuttamiseksi lista täydellisesti.

Bulletgraph

Luodiagrammi vertaa yhtä toimenpidettä yhteen tai useampaan muuhun toimenpiteeseen ja näyttää laadullisen suorituskyvyn. Ne ovat melko joustavia tietoihin perustuville sivustoille. Opi luomaan luettelomerkki käyttämällä CSS / HTML-ohjelmaa.

Pylväskaavio

Sarakepalkkigrafiikka luodaan käyttäen CSS: ää, jossa arvot näkyvät värillisissä pystysuora tankoissa, jotka saavuttavat eri korkeudet määritettyjen arvojen mukaisesti. Tämä kaavio antaa meille selkeän käsityksen, koska arvot tulostetaan suoraan täällä. Käyttämällä CSS-valitsimia, spriterejä, luetteloiden muotoilua jne. Opit luomaan sarakekuvion opetusohjelmasta.

Downtime-kaavio

Alaskäynnistyskaaviossa oli aluksi ongelma, joka näytti pitkää aikaväliä rajoitetulla näytön alueella ja pitää tapahtumien läpinäkyvä ulkoasu, joka selvennetään kuukausittaisen kalenteriparadigman avulla. OnMouseOver () on käynnissä ja eri värejä käytetään erilaisten seisokkitapahtumien yhteydessä.

Dynaaminen live-CSS-kaavio

Live-dynaaminen CSS-käyrä, joka näyttää web-palvelimen suorittaman pingin vasteajan, lukee tiedot verkkopalvelimelta, jossa on CSS- ja JavaScript-koodit, AJAX-toiminnot ja kaavion liukuminen.

Vaakasuora kaavio

Pylväsdiagrammissa ei aina tarvitse olla bevertisiä. Voidaan myös luoda vaakasuora pylväsdiagrammi. Tässä artikkelissa luodaan vaakasuora pylväsdiagrammi, jossa on erilaisia ​​värivaihtoehtoja käyttämällä luokan "vaakakuvaa" ja määritellään kuvion korkeus merkinnästä CSS: llä.

Multigraph

Linjakaavio, jossa ei käytetä kuvien taulukoita, luodaan CSS- ja DHTML-tiedostoilla, jotka latautuvat nopeammin ja taustaa voidaan muuttaa läpinäkyväksi.

Tuotantosuunnitelma

Tuotantosuunnitelmakartta luodaan käyttämällä kaavioluokkaa kaavion säiliönä ja hLine myös vLine erotinlinjojen piirtämiseen. Tätä kaaviota käytetään intranet-sovelluksissa. Kaavion leveys lasketaan näytettyjen päivien lukumäärän ja korkeuden mukaan käyttämällä työn muutosten määrää.

Sandwich-kaavio

Sandwich-kaavio luodaan, kun yksittäinen palkkipalkkipalkki on jaettu moniin kerroksiin, joissa yhden sarakkeen korkeus voi osoittaa globaalin trendin, kun taas yhden kerroksen korkeus osoittaa osan tästä kerroksesta. Luo CSS-kerrosgrafiikka tästä opetusohjelmasta.

Pinottu ruutu

Pinottu kaavio esittää datan määrittelyluetteloa, sitten marginaalit ja pehmusteet palautuvat näkyviin samoin kaikissa selaimissa. Akselit lisätään ja tyylitellään, jotta pinotut palkit saadaan. Jokainen yksityiskohta opetetaan tässä opetusohjelmassa.

Yksinkertainen kaavio

Pylväsdiagrammi, joka on luotu CSS: n ja PHP: n grafiikkakirjastolla ja ilman marginaaleja käyttäviä suuria laskelmia. Pehmustaminen, jonka avulla on helppo ymmärtää vain käytetty tekniikka