Datu vizualizācija ar CSS grafikiem, diagrammām un vairāk

Labs datu noformējums ir svarīgs interneta nozares aspekts, jo tas ir galvenais, lai ļautu apmeklētājiem dažu sekunžu laikā saprast jūsu saturu. Jo vieglāk vai ātrāk apmeklētāji iegūst jūsu tīmekļa satura izpratni, jo lielāks ir jūsu profesionālisms prezentācijas apstrādē. Kritērijiem pienācīgai datu sniegšanai būtu jābūt vienkāršai, bet aprakstošai, labi izstrādātiem, bet jāspēj saglabāt lietotāja interesi, nav sviedru, lai sagremot tās saturu, ērti salīdzināt un, visbeidzot, lietotājam vajadzētu būt iespējai pieņemt lēmumus vai bez grūtībām noslēgt datus. Tas ir tikpat grūti, kā šie ārprātīgie kritēriji.

Šodienas amatā mēs vēlamies paņemt savu braucienu uz dažādām skaistajām un skaistākajām pieejām radoši datu vizualizācijas rīki, kas pilnībā balstās uz CSS / HTML. Jā vienkārši kopējiet un ielīmējiet, pēc tam pielāgojiet to atbilstoši savām vēlmēm. Šīs diagrammas var būt CSS joslu diagrammas, kas parāda datus horizontālā / vertikālā formā, nolaižamo sarakstu jūsu organizētajiem datiem vai pat rindu diagrammas un piezīmju diagrammas!

Tu vēlies vairāk? Turpiniet ritināšanu!

Horizontālais svītrkods

Vienkāršs veids, kā rādīt statistisko skaitli kā pārskatu ar šo pieejamo joslu diagrammu, izmantojot CSS. Bārs aprēķina izmantotās šūnas un etiķetes. Tabulas galvenes izmanto, izmantojot fonētisko teksta klasi

CSSplay

Svītru diagrammas ir galīgais saraksts ar stiliem un klasēm, kas noteiktas katrā rindā. Pirmajai diagrammai ir kļūda, kas rodas, ja vērtības tuvinās 100%, kas tiek labots otrajā diagrammā. Jūsu atsaucei ir pievienots pirmkods.

Procentuālais grafiks

Izmantojot CSS procentuālās platuma spējas, šajā apmācībā tiek veidota procentuālā bāze. Horizontālā joslas diagrammā var iestatīt marķieri, lai pārvietotos garumā no kreisās uz labo pusi vai izveidotu vertikālu grafiku, izmantojot to pašu tehniku ​​un reproducējot to vairākas reizes

Maxdesign

Russ Weakley māca jums izveidot grafiku, kura pamatā ir procentuālā daļa un fona attēli. Kodu un saistītos attēlus var kopēt un lejupielādēt, lai tos izmantotu savā projektā.

Vertikālais barchart

Izveidojiet vertikālās joslas diagrammas, izmantojot CSS un PHP, izveidojot vienkāršu sarakstu ar augstumu atsevišķu joslu pikseļos, bāra grupas y-asi un klasi, lai veidotu datu kopas. Ēriks Meijers māca, lai tas tiktu pārvērsts par svītru diagrammu, līniju grafiku, smailu grafiku un 3D grafiku, izmantojot tās pašas metodes

Pure CSS Linegraph

Līniju diagrammas sniedz informāciju daudz ātrāk nekā tabulas ar cipariem. Uzziniet, kā izveidot līniju diagrammu ar CSS, izmantojot HTML, aizstāt tekstu ar attēliem un izmantot CSS sprites un absolūtu pozicionēšanu, lai iegūtu rindas grafiku.

Vienkāršs Linegraph

Daudz vienkārša līnijas diagramma, kas izmanto tikai DHTML un CSS, un kur jūs varat iestatīt grafika pārredzamu fonu. Šī diagramma ielādējas ātrāk un saplūst ar pārējo lapu.

Mgraph

Šis Ajax grafiks tiek izmantots, lai attēlotu gada datus saskaņā ar katru mēnesi, izmantojot tikai CSS un XHTML, un tas darbojas Firefox un Opera.

Daudzslāņu saraksti

Paul Novitski māca jums izveidot vairāku sleju sarakstu, izmantojot CSS šajā rakstā. Viņš apspriež daudzas metodes, lai sasniegtu vairāku kolonnu sarakstus, piemēram, peldot sadalīšanas sarakstus, numurējot tos ar HTML atribūtu, CSS radīto saturu, iesaiņojot sarakstu ar XHTML, CSS utt. Un beidzot pievienojot mazu stilu un fona attēlu, lai iegūtu vairāku kolonnu sarakstu.

Bulletgraph

Aizzīmju grafiks salīdzina vienu pasākumu ar vienu vai vairākiem citiem pasākumiem un parāda kvalitatīvo sniegumu diapazonu. Tie ir diezgan elastīgi datu vietnēm. Uzziniet, kā izveidot grafa diagrammu, izmantojot CSS / HTML.

Kolonnu diagramma

Kolonnu joslu diagramma tiek veidota, izmantojot CSS, kur vērtības tiek parādītas krāsainos vertikālos stieņos, kas sasniedz dažādus augstumus atbilstoši norādītajām vērtībām. Šis grafiks mums sniedz skaidru priekšstatu, jo vērtības tiek tieši izdrukātas šeit. Izmantojot CSS selektorus, sprites, sarakstu veidošanu utt., Iemācīties izveidot kolonnu diagrammu no apmācības.

Dīkstāves grafiks

Dīkstāves grafikā sākotnēji bija problēma, parādot ilgu laika intervālu ierobežotā ekrāna apgabalā un saglabājot pārredzamu notikumu izkārtojumu, ko precizēja mēneša kalendāra paradigma. OnMouseOver () tiek darbināts un dažādas krāsas tiek izmantotas dažādu veidu dīkstāves gadījumos.

Dynamic live CSS grafiks

Tiešraides dinamiskā CSS diagramma, lai parādītu web servera veikto ping atbildes laiku, nolasa datus no tīmekļa servera ar CSS un JavaScript kodu, AJAX funkcijām un grafika slīdēšanu.

Horizontālais krustojums

Svītru diagrammai vienmēr nav nepieciešams. Var izveidot arī horizontālu joslu diagrammu. Šajā rakstā tiek veidota horizontāla josla diagramma ar dažādām krāsu variācijām, izmantojot klases “horizontālo grafiku” un norādot grafika augstumu no iezīmēšanas, izmantojot CSS.

Multigrāfs

Līniju diagramma, kurā netiek izmantotas nevienas attēlu tabulas, tiek izveidots ar CSS un DHTML, kas ātrāk ielādējas un fonu var mainīt kā caurspīdīgu.

Ražošanas plāna grafiks

Ražošanas plāna grafiks tiek izveidots, izmantojot grafu klasi kā diagrammas konteineru un hLine arī vLine atdalītāju līniju zīmēšanai. Šo diagrammu izmanto iekštīkla lietojumprogrammās. Diagrammas platums tiek aprēķināts atbilstoši parādītajam dienu skaitam un augstumam, izmantojot darba izmaiņu skaitu.

Sandwich grafiks

Sandwich diagramma tiek veidota, kad viena josla joslas diagrammā ir sadalīta daudzos slāņos, kur vienas kolonnas augstums var norādīt uz globālo tendenci, bet viena slāņa augstums norāda daļu no šī slāņa. Izveidojiet CSS sendviča diagrammu no šīs apmācības.

Stacked bargraph

Stacked graph, definīciju saraksts tiek izmantots, lai iesniegtu datus, tad margas un polsterējums tiek atiestatīti, lai parādās vienādi visās pārlūkprogrammās. Tiek pievienotas asis un stilizēti, lai iegūtu stekus. Katra detaļa ir precīzi mācīta šajā apmācībā.

Vienkāršs grafiks

Svītru diagramma, kas izveidota, izmantojot CSS un PHP sans grafikas bibliotēku un bez daudziem aprēķiniem, kas izmantoti starpībām. Padding padarot to diezgan viegli saprotamu tikai izmantoto tehniku