Adatmegjelenítés CSS grafikonokkal, grafikonokkal és többvel

Egy jó adatszolgáltatás fontos szempont a webes iparágban, mivel ez a kulcs, amely lehetővé teszi a látogatók számára, hogy másodperceken belül megértsék a tartalmát. Minél könnyebb vagy gyorsabb lesz a látogatója a webtartalmának, annál jobban tükrözi a professzionális megjelenést. A tisztességes adatszolgáltatás feltételeinek egyszerűnek, de leírónak, jól kidolgozottnak kell lenniük, de meg kell őrizniük a felhasználó érdeklődését, nem vesznek izzadságot a tartalom megemésztésére, összehasonlíthatóak, és végül a felhasználónak képesnek kell lennie arra, hogy döntéseket hozzon, vagy könnyedén zárja le az adatokat. Olyan kemény, mint ezek az őrült kritériumok, lehetséges.

A mai poszton szeretnénk, ha a szép és a legkülönbözőbb megközelítésekhez vezetnének kreatív adatmegjelenítő eszközök, amelyek teljes mértékben a CSS / HTML alapúak. Igen csak másolja és illessze be, majd testreszabja azt az Ön igényei szerint. Ezek a diagramok lehetnek olyan CSS oszlopdiagramok, amelyek vízszintes / függőleges formátumú adatokat jelenítenek meg, a legördülő listát a szervezeti adatokra, sőt a vonalas grafikonokat és a kördiagramokat.!

Többet akarsz? Görgess tovább!

Vízszintes Barchart

Egy egyszerű módja annak, hogy a statisztikai számot áttekintve jelenítse meg a hozzáférhető sávdiagram segítségével a CSS használatával. A sáv a használt cellákat és címkéket kiszámítja. A hangszöveg-osztály használatával használt táblázatfejlécek

CSSplay

A sávdiagramok az egyes sorokban meghatározott stílusok és osztályok végleges listája. Az első diagram hibája van, amikor az értékek közelebb kerülnek a 100% -hoz, amelyet a második táblázat javít. A forráskód tartalmazza a referenciát.

Százalék Bargraph

A CSS százalékos szélességi képességeinek felhasználásával ebben a bemutatóban egy százalékos sávdiagramot hozunk létre. Vízszintes sávdiagramban beállíthat egy jelölőt, hogy balról jobbra haladjon, vagy ugyanazt a technikát használva, és többször reprodukáljon függőleges grafikont

Maxdesign

Russ Weakley azt tanítja, hogy hozzon létre egy grafikont a százalékos és a háttérképek használatával. A kapcsolódó kód és képek másolhatók és letölthetők a projektben való felhasználásra.

Függőleges barchart

Hozzon létre függőleges oszlopdiagramokat a CSS és a PHP segítségével azáltal, hogy egy egyszerű listát hoz létre, amely magassága az egyes sávok, a sávcsoport és az osztály y-tengelye pixeljeiben az adatkészletek stílusához. Eric Meyer azt tanítja, hogy ugyanazt a technikát használva egy oszlopdiagramra, vonaldiagramra, hegyes gráfra és egy 3D-s gráfra kapcsolja

Pure CSS Linegraph

A sorgrafikonok sokkal gyorsabban szolgáltatják az információkat, mint a számokkal ellátott táblák. Ismerje meg, hogyan hozhat létre vonalkódot CSS segítségével HTML használatával, cserélje ki a szöveget képekkel és használja a CSS spriteket és abszolút pozicionálást, hogy egy sorgrafikát kap.

Egyszerű Linegraph

Egy sokkal egyszerűbb grafikon, amely csak DHTML-t és CSS-t használ, és ahol átlátszó hátteret állíthat be a grafikon számára. Ez a grafikon gyorsabban töltődik be és keveredik az oldal többi részével.

Mgraph

Ez az Ajax gráf arra szolgál, hogy egy hónap adatait reprezentálja minden hónap szerint, csak CSS és XHTML használatával, és fut Firefoxban és Opera-ban

Többoszlopos listák

Paul Novitski azt tanítja, hogy készítsen többoszlopos listát a CSS használatával ebben a cikkben. Sok technikát vitat meg, hogy egy többoszlopos listát érjen el, mint például az osztott listák lebegése, a HTML-attribútummal való számozás, a CSS által generált tartalom, a lista XHTML, CSS stb. Csomagolásával, és végül hozzáad egy kis stílus és háttérképet a több oszlop eléréséhez listát tökéletesen.

Bulletgraph

A golyó grafikon egyetlen intézkedést hasonlít össze egy vagy több más intézkedéssel, és megjeleníti a teljesítmények minőségi tartományát. Ezek elég rugalmasak az adatok által vezérelt webhelyek számára. Ismerje meg, hogyan hozhat létre egy golyógrafikát CSS / HTML használatával.

Oszlop oszlopdiagram

Egy oszlop oszlopdiagramot hozunk létre a CSS használatával, ahol az értékek színes függőleges oszlopokban jelennek meg, amelyek a megadott értékek szerint különböző magasságokba érnek. Ez a grafikon hamar világos képet ad, mert az értékek közvetlenül kinyomtathatók. A CSS-szelektorok, a spritek, a listák stílusa stb. Használatával megtanulhat létrehozni egy oszlopdiagramot a bemutatóból.

Leállási grafikon

A leállási grafikon kezdetben problémát jelentett a korlátozott képernyőterületen hosszú időintervallumok megjelenítésével és az események átlátható elrendezésének megtartásával, amelyet a havi naptár paradigma tisztázott. Az onMouseOver () futtatása folyamatban van, és különböző színeket használnak különböző típusú leállási eseményekhez.

Dinamikus élő CSS grafikon

Egy élő dinamikus CSS grafikon, amely megjeleníti a webkiszolgáló által végrehajtott ping válaszidőt, olvassa el az adatokat egy webkiszolgálóról CSS és JavaScript kóddal, AJAX funkciókkal és grafikon csúsztatással.

Vízszintes oszlopdiagram

A sávdiagramnak nem kell mindig bevertikusnak lennie. Vízszintes oszlopdiagram is létrehozható. Ebben a cikkben egy vízszintes sávdiagramot készítünk különböző színváltozatokkal egy „horizontális gráf” osztály használatával, és megadva a gráf magasságát a jelölésből a CSS segítségével.

multigráf

A CSS és a DHTML segítségével gyorsabb grafikákat hoz létre, és a háttérképet átláthatóvá teszi..

Termelési terv grafikon

A termelési terv gráfosztályként gráftartályként és hLine is vLine az elválasztó vonalak rajzolásához. Ezt a grafikonot intranet alkalmazásokban használják. A grafikon szélességét a megjelenített napok és magasságok számának megfelelően számítják ki a munkahelyváltozások számával.

Szendvics grafikon

A szendvics grafikon akkor jön létre, ha egy sáv egy oszlopdiagramban több réteget oszt meg, ahol az egyetlen oszlop magassága globális trendet jelezhet, míg az egyetlen réteg magassága jelzi a réteg egy részét. Hozzon létre egy CSS szendvics gráfot a bemutatóból.

Halmozott oszlopdiagram

Egy halmozott gráf esetében egy definíciós listát használnak az adatok bemutatására, majd a margók és a párnázás minden böngészőben ugyanazokra kerülnek. A tengelyeket hozzáadják és stilizálják, hogy megkapják a halmozott rudakat. A bemutatóban minden részletet pontosan tanítanak.

Egyszerű grafika

CSS és PHP sans grafikus könyvtár segítségével létrehozott sávdiagram, és a margókhoz használt számítások nélkül. Kitöltéssel, ami meglehetősen könnyű megérteni a használt technikát