Hogyan hozzunk létre egy ütemtervet az SVG
Miért vásznon?
Számos módja van, hogy hozzon létre hálózati diagramokat, és különösen a vásznon. Azonban Sara Soueidan tanácsolja, hogy ne ezt a módszert:
«HTML5 Canvas is fel lehet használni, hogy hozzon létre egy megjelenítő, de generált tartalom nem része a DOM és nem férhetnek hozzá. Hogy oldja meg ezt a problémát, akkor kellett volna megismételni a tartalom között, a nyitó és a záró vásznon. Ez a megoldás is rendelkezik follbek régebbi böngészők. Szintén meg kell kötni follbek tartalmat a vásznon, hogy a kölcsönhatás a elemek reagál megfelelően. Így a HTML5 Canvas, meg kell megismételni az összes tartalmat [. ] Az SVG, akkor azonnal kap egy szemantikailag és a rendelkezésre állás együtt interaktivitás JS out of the box ".
De vannak más módjai mellett a vásznon. Például Végtelen Group írta JQuery nevű plugint Visualize. amely összegyűjti az összes információt az asztaltól, és a táblázat alapján kapott adatok létrehozására egy grafikont. Ez a módszer kerül sor, még akkor is, ha a táblázat csak az egyik eleme.
Miért SVG?
Az SVG formátum nem csak ikonokat vagy egyszerű képeket. Ez megvan a maga előnye, hogy hozzon létre grafikonok. Idegenvezetőnk SVG leírjuk fő előnye ennek a formátuma a következő:
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
Kis fájlméret, jó tömörítés
Teljes skálázhatóság (kivéve a nagyon apró méretű)
Nagy retina kijelzők
Kölcsönhatás és szűrők
És akkor is adjunk hozzá két legfontosabb előnye, hogy hasznos lesz a grafikonok:
SVG áll rendelkezésre böngésző (lesz egy kicsit a munka)
Annak érdekében, hogy láthatjuk a sok SVG keretek létrehozására grafikonok
Kezdjük. Mivel a legegyszerűbb módja annak, hogy hozzon létre egy grafikon SVG?
A grafikonok segítségével img
Készítsen grafikát SVG olyan könnyen, mint az Illustrator vagy más mezőorientált alkalmazást, majd exportálni azt SVG és helyezze jelölő keresztül tag img:
Ez egy nagyon jó módja, valamint a kép jól skálázható. Mégis, elveszítjük a legtöbb előnye a beépített SVG, beleértve a hozzáférést az DOM és interakció. A böngészők nem tud olvasni ezeket a kottákat, csak olvasni az alt attribútumot, és elvesztette a kölcsönhatás az egér, érintőképernyő vagy billentyűzet.
Mindezeket a problémákat felveti a keresést egy másik módja, hogy helyezze SVG oldal elrendezését. Például, ha az nem ugyanaz, mint a Death from Above projekt. Használt Van egy módja annak, hogy befolyásolja a grafikonok segít minket, hogy megértsük.
Ahhoz, hogy a legtöbbet az SVG, akkor meg kell tennie az összes kódot ezt a példát, és illessze be az oldalon. Diagramok (grafikonok csúcsok) lehet stílusú CSS segítségével, interaktivitás változás a JS - így átázott minden előnyét beépített SVG.
(Ahhoz, hogy ugyanazt az eredményt, akkor tárgy vagy iframe, a koncepció nagyon hasonló. De ha közelebbről megvizsgáljuk inlaynovy SVG.)
Histograms
Minden oszlop a gráf egy tag
Téglalap helyzetben az elemek és szöveg segítségével az x / y koordinátái:
Felhívjuk figyelmét, hogy ha az egérmutatót a grafikon színe megváltozik az oszlop és a szöveget. Meg tudja kezelni azt a segítségével CSS tulajdonságok töltse:
Sparklines
Mivel értékgörbék sokféleképpen ez a kis oszlopdiagram, azt kölcsön a legtöbb kód az előző példából:
Ezúttal összehangolni Group
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
vonaldiagramok
vonallánc címke segít beállítani a vonali és attribútum pontok - pontok csúcsok:
0,120 0 azt jelenti, a bal és a 120 a tetején a SVG vászon. Amikor úgy döntöttünk, a tetejét grafika, akkor meg a vonal szélessége a stroke-szélességű, a vonal színét a stroke:
De ez csak a grafikon stílusok - de mi a helyzet a fővonalak, amelyek segítenek megérteni, hogy mi az, ami? Mi a helyzet a tengely?
Létrehozása a tengelyek és címkék
Roemer Vlasveld írt egy kiváló cikket létrehozásáról szóló SVG grafika. Ő dokumentálta egy pár érdekes tulajdonságokkal, amely segít bennünket abban, hogy hozzon létre betűkkel és stilizált grafika tengely. Mi újra egyszerűsített változata a példáját:
minden csoport
Hozzáadni egy másik csoport minden pontján egy kör elemet, akkor láthatjuk, hogy mi történik:
kördiagram
Már említettük párszor egy cikket Lea Verou tortadiagramokból mivel ez egy kiváló példa. Ez az, ahol elkezdjük. Nem fogom újra elmagyarázni neki a technikát itt, bár érdekes lenne látni, hogyan is kölcsönhatásba kördiagramok a SVG. Az alábbiakban egy kész példa, hogy megértsék, mi arra törekszünk, hogy:
Ha rákattint a gombra a diagram fölött van, akkor ez frissül. Az értékek vesznek a JS objektumot. Ebben az eljárásban is megvannak a saját problémái a hozzáférhetőség, de felhívta a figyelmet, hogy az együttműködés a JS és SVG. Először is, a jelölés:
Most kérdezd meg a népességi adatok:
Meg kell, hogy töltse ki az üres blokkokat .buttons gombok kattintva ami megváltoztatja a stroke dasharray -nak SVG kör elemet. Akkor létre egy gombot, mint ez:
Most helyes százalékok: Ázsia: 60 házban kontinensen a 60 100 százaléka helyett egy kör. Hozzon létre egy függvény erre a célra:
Most adjunk hozzá egy eseménykezelő minden gomb, hozzon létre setPieChart () függvényt. Ez a funkció megváltoztatja az értéket a stroke dasharray, ellenőrzi az adatokat tulajdonsággal, minden gomb és a megfelelő információ megtalálásához:
Hozzáadja ezeket támogató funkciók, megkapjuk a kész kördiagram:
Animáció az előző példákban meglehetősen egyszerű volt, minden, amit tennie, hogy használja az átmenet tulajdonság:
Miután megváltoztattuk az értéket a tulajdonság segítségével egy script, a többi a munka számunkra teszi CSS. És mi más SVG tulajdonságok és attribútumok keresztül manipulálható CSS?
SVG jellemző stílust CSS, hogy csak akkor tudjuk irányítani bizonyos tulajdonságait. Például, ha meg akarjuk változtatni az x vagy y koordinátáit, vagy egy csoport,
A W3C egy hasznos listát. amely tulajdonságok befolyásolják a specifikus SVG elemek. Tehát ellenőrizd mielőtt alkalmazni CSS tulajdonság egy adott elemet.
SVG szerkesztő kézzel nem a legjobb módja annak, hogy
Ilyen alapvető formák, mint a len, vonal és poligon, akkor létrehozhat bármilyen SVG diagramok. Az igazi probléma máshol: van rá szükség? Például vonaldiagramokat továbbra is létrehozhatók kézzel is, de én nem ajánlom csinálom. A szintaxis kissé bonyolult, különösen, ha kell létrehozni görbék.
SVG írási kézzel lassú és kellemetlen folyamat. Még létrehozása egyszerű grafikonok szükség van egy örökkévalóság írni a kódot, és ellenőrizze a helyzetét az egyes grafikai elem. Ahogyan létrehozásakor grafikonok tiszta CSS, SVG írásban kéz nagyon fájdalmas folyamat, ha természetesen nem hoz létre egy nagyon kis táblázatot. Kell lennie egy másik, sokkal kényelmesebb módon?
Keretek segítségével!
Felülvizsgálat: Team webformyself.
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
A legtöbb IT hírek és webfejlesztés A csatorna-távirat