A rugalmas és támogatja kördiagramokat CSS és svg
Mentése vagy megosztása
Bár ez a feladat, és nem is olyan lehetetlen, mint valaha volt, eddig nincs egyszerű egyetlen megoldás. Azonban ma már sokan a legjobb (összehasonlítva a fent leírt módszerekkel), a támogatott módja a kördiagram.
Határozata alapján transzformáció
Ez a megoldás a legjobb szempontjából elrendezés, és ehhez csak egyetlen elem, és minden mást fog tenni a segítségével ál-reformok és CSS színátmenetek. Kezdjük egy egyszerű elem:
Most tegyük fel, hogy szükségünk van egy kördiagram, amely megjeleníti kódolva 20%. Több mint úgy, hogy rugalmas, fogunk dolgozni később. Styling első elem, mint egy kör, ami a mi háttér (1. ábra):
1. ábra - A kiindulási pont (kördiagram mutatja 0%)
A kördiagram zöld (pontosabban, sárgászöld) barna szektor (# 655), mely a százalékos értéket. Mi lehet a kísértés, hogy használja ferde, hogy átalakítsa a kamat egy részét, de amint azt a kis kísérlet, akkor elég hanyag megoldás. Ehelyett festünk a bal és jobb részei kínálatból két színben, és használja a pszeudo-forgás, hogy hozzák nyilvánosságra csak az a része a kör, hogy szükségünk van.
Festeni a jobb oldalán a kör barna színű, akkor egy egyszerű lineáris gradiens:
2. ábra - színezés a jobb oldalán a kör barna egyszerű lineáris gradiens
Mint látható a 2. ábrán, ez minden, ami kellett. Most folytassa a stílus pszeudo, ami jár, mint egy maszk:
3. ábra - pszeudo hatású, mint egy maszk, itt kiemelt pontozott határ
A 3. ábrán látható, hogy az adott pillanatban mi pszeudoelem tekintetében a kördiagram. Most még nem stilizált és nem hajt végre feladatokat. Ez csak egy láthatatlan téglalap. Mielőtt folytatja a stílus, csináljunk néhány megjegyzést:
- mert azt akarjuk, hogy elrejtse a barna része a kör. kell alkalmazni a pszeudoelem zöld háttér segítségével background-color: örökli. az átfedések elkerülése kinevezésében neki ugyanazt a háttér színe, mint a szülő elem;
- azt akarjuk, hogy lehet forgatni körül a kör közepére. amelynek székhelye a középső bal oldalon a pszeudo-ezért kell beállítani, hogy a transzformációs származási értéke 0 50%, vagy csak balra;
- nem akarjuk, hogy legyen egy téglalap, hiszen ebben az esetben ez túl a szélén a kördiagram, így van, hogy a végfelhasználók overflow: hidden .pie. vagy megkérni egy border-radius. hogy ez egy félkört.
Azt hajtogatott össze az egészet, megkapjuk a következő stílust mi ál;
4. ábra - pszeudo Srs (az ábrán szaggatott határ) után formázó
Megjegyzés: Ne használjon háttér: öröklik; helyett háttérsugárzás-color: öröklik, mint ebben az esetben is öröklik, és a gradiens!
Most a kördiagram külleme 4. ábra Itt és kezdődik a móka! Kezdhetjük viszont az ál. alkalmazása forgatás () átalakulás. Ahhoz, hogy 20%. megpróbáljuk végrehajtani, tudjuk használni 72deg értéket (0,2 × 360 = 72), vagy a .2turn. olvashatóbb. Az 5. ábrán látható, hogyan néz ki, és több más értékeket.
5. ábra - A mi egyszerű kördiagram mutatja a különböző százalékos, balról jobbra: 10% (36deg vagy .1turn), 20% (72deg vagy .2turn), 40% (144deg vagy .4turn)
Azt gondolhatnánk, hogy a munkát végzik, de sajnos nem olyan egyszerű. A kördiagram nagy megjelenítésére százalékos 0-50%, de ha azt próbáljuk megmutatni, 60 százalékkal pedig (alkalmazó .6turn), hogy mi látható a 6. ábrán, de még mindig nem veszítsék el a reményt, meg tudjuk javítani és csináld!
6. ábra - A kördiagram megtört több mint 50% (itt látható 60%)
Ha figyelembe vesszük a térképen részesedése 50% -100%, mint egy külön kérdés, akkor látható, hogy a számukra, fel tudjuk használni egy fordított változata a korábbi döntést. barna ál forgó, illetve 0 és .5turn. Így egy részesedése 60% pszeudo-kód a következő:
7. ábra - Most helyes, kördiagram, melynek értéke 60%
A 7. ábrán látható, a kód akcióban. Mivel most már kifejlesztett egy módja annak, hogy jelenjen meg a százalékot, és mi is animálni a kördiagram 0% -tól 100% CSS animációk. létre az a fajta fejlődés mutatója:
Minden jó, de hogyan is stilizálhatja több statikus kördiagramokat különböző mennyiségekben, amely a leggyakoribb felhasználási rajzok? Ideális esetben azt akarjuk, hogy képes nyomtatni, valahogy így:
és kap két tortadiagramokból egyik ami azt mutatja, 20%, és a másik - 60%. Először is nézzük meg, hogyan lehet csinálni a segítségével a beépített stílusok, és akkor mindig írni egy rövid forgatókönyvet értelmezni a szöveges tartalom, illetve az ehhez beépített stílusok kódot elegancia, tokozás, támogathatóság, és ami talán a legfontosabb, a rendelkezésre.
A komplexitás a menedzsment százalékos kördiagram egy beépített stílusok, hogy a CSS kódot, amely felelős az százalékában van beállítva, hogy ál. Mint tudja, nem lehet beállítani a beépített stílusok az ál. így van, hogy több ötletes.
Megjegyzés. Ahhoz, hogy használni az értékek a színskála nélkül ismétlődik, és bonyolult számításokat az alábbi módszerrel. Ugyanez a módszer alkalmazható más esetekben. Az alábbiakban egy egyszerű, izolált ilyen módszer példáját.
A megoldás származik az egyik legváratlanabb helyeken. Fogunk használni animáció, amely már látható, de szünetel. Ahelyett futtatni, mint a hagyományos animáció, használjuk a negatív késedelem animáció helyzetének beállításához bármely pontján az animáció, és ott maradni. Meglepett? Igen, animáció késleltetési negatív értékek csak a számukra a leírás, de nagyon hasznos az ilyen esetekben.
Mivel a tetszhalál csak akkor jelenik meg az első a maga keret (határozza meg a negatív animáció-delay érték). A százalékos látható a kördiagram egyenlő egy százalékos, ami a mi animáció-késedelem a teljes időtartama. Például a jelenlegi időtartama 6s. szükségünk van az értéke animáció-delay. egyenlő -1.2s. hogy bemutassák a részesedése 20%. Egyszerűsítése érdekében a számításokat, akkor az időtartam beállításához a 100s. Tartsuk szem előtt, hogy mivel az animáció leáll jó, az értéke annak időtartama, amit létrehozott, nem játszik más szerepet.
És az utolsó kérdés: az animáció alkalmazzák a pszeudo-elem, de szeretnénk beállítani egy belső stílus egy elemhez .pie. Annak ellenére azonban,
És a CSS kód animáció lesz a következő (szabályok nem kerülnek megjelenítésre .pie, mert ugyanaz maradt):
Abban a pillanatban, tudjuk konvertálni az elrendezést használja a kamat tartalom ahogy eredetileg is fog csinálni, és adjuk hozzá a beépített stílusok animáció-delay egy egyszerű script:
Figyeljük meg, hogy mi maradt érintetlen a szöveget, mivel ez szükséges ahhoz, hogy a hozzáférhetőség és a használhatóság. Most a kördiagram néz ki, mint a 8. ábra Meg kell elrejteni a szöveget, amely lehet bocsátani egy szín: átlátszó úgy, hogy marad kijelölve, és nyomtatható. Az extra fényes rakjuk a százalékok közepén a pite. hogy ők nem egy véletlenszerű helyre, amikor a felhasználó megpróbálja szétválasztani őket. Ehhez meg kell:
8. ábra - A szöveget mielőtt elrejteni- átalakítani az érték diagram magassága line-height (vagy hozzáadott értéket line-height megegyező magasságú, de értelmetlen lenne párhuzamos kódot, mint a line-height van beállítva, hogy a számított érték a magasság jó ...);
- adja meg a méretét és pozícióját az ál segítségével abszolút pozicionálás. hogy nem nyomja a szöveget le;
- add text-align: center;. a központtól a szöveg vízszintesen.
Az utolsó kód így néz ki:
A megoldás alapján SVG
SVG teszi a megoldás számos grafikai feladatok egyszerűbbé és tortadiagramok nem kivétel. Azonban ahelyett, hogy a kördiagram segítségével az utakat, amely megkövetelné összetett matematikai, mi egy kis trükk.
Most rá vonatkozó néhány alapvető stílusok:
Megjegyzés. Mint tudja, a CSS tulajdonságokat is rendelkezésre állnak, mint egy SVG elem attribútum, ami hasznos lehet, ha számhordozás adott aggodalomra ad okot.
9. ábra - A kiindulási pont: zöld SVG kör egy vastag szélütés # 655
A bekarikázott kör látható a 9. ábrán stroke SVG nem csak a tulajdonságait a stroke és a stroke-szélesség. Sok más, kevésbé népszerű kapcsolódó tulajdonságokat stroke, amelyek lehetővé teszik, hogy finomítsa a megjelenésüket. Egyikük a stroke-dasharray. célja, hogy megteremtse a szaggatott mozdulatokkal. Például, tudtuk használni erre a célra:
10. ábra - Egyszerű szaggatott löket létre a stroke-dasharray
Ez azt jelenti, hogy azt akarjuk, hogy egy csipetnyi hossza 20 időközönként hossz 10 amilyeneket a 10. ábrán látható Ezen a ponton lehet, hogy vajon mi ez a SVG például van valami közös kördiagram. Azonban minden érthetővé válik, ha tudjuk alkalmazni a nyitási hossz 0 és kötőjel időközönként hosszabb vagy egyenlő, mint a kerülete a kör (C = 2πr, vagy ebben az esetben C = 2π × 30 ≈ 189):
11. ábra - többszörös löketek-dasharray értékeket és azok eredményei; Balról jobbra: 0189; 40189; 95189; 150189
Mint látható, az első fordulóban az arány 11 teljesen megszünteti a stroke, és mi marad csak egy zöld kör. Azonban szórakozás kezdődik, amikor elkezdjük növelni az első érték (11. ábra), mivel ilyen hosszú szünet érünk már szaggatott a stroke és az agyvérzés, amely egy százalékát a kerülete egy kör, ami azt állapítjuk meg.
Lehet, hogy már tudta, hogy milyen irányba haladunk: ha csökkentik a sugár a kör elég, hogy teljesen befedje a stroke, mi végül kap valamit, nagyon emlékeztet egy kördiagram. Például a 12. ábrán látható, hogyan fog kinézni, amikor azok a kör sugara 25 mm, szélessége a szélütés (stroke szélesség) 50:
12. ábra - A SVG kép kezd hasonlítani a kördiagram
Ne feledje: SVG szélütés mindig félig belül, félig kívül az elem, amelyre alkalmazzák. A jövőben, mi lesz elérhető, hogy ellenőrizzék ezt a viselkedést.
Most viszont ezt a képet a kördiagram hasonló ahhoz, amit hoztunk létre a korábbi megoldás, ez meglehetősen egyszerű: csak kell hozzá több zöld kör alatt a stroke és fordítsa el 90 ° óramutató járásával ellentétes irányban úgy, hogy elindul a közepén. mint
13. ábra - A végső kördiagram SVG
Láthatjuk a végeredményt a 13. ábrán Ez a módszer még könnyebbé teszi animálni kördiagram 0% -tól 100%. Csak létre kell hozni egy CSS animációt, amely megváltoztatja a stroke dasharray 0158-158 158:
Mint egy további javulás, tudjuk meg egy adott kör sugara úgy, hogy a hossza a kerületének volt (végtelenül közel) 100, és így tudjuk meg a hosszát a stroke-dasharray. százalékban. nélkül számításokat. Mivel a kör kerületének egyenlő 2πr, szükségünk van egy sor 100 ÷ 2π ≈ 15,915494309, amelyek igényeinknek is fel kell kerekíteni 16. Mi is a méret SVG viewBox attribútumot. ahelyett, hogy a szélesség és magasság attribútumokat. annak érdekében, hogy alkalmazkodni a mérete a tartályba.
Miután ezek a módosítások, a kör alakú elrendezést tükrözi a 13. ábrán látható, a következő lenne:
A CSS lesz:
és adjunk hozzá egy beépített SVG belül minden elem .pie az összes szükséges elemeket és attribútumokat. Azt is hozzáteszi, egy elemet