Grafico a torta html. Grafici svg a torta e a ciambella in HTML5 da zero
Grafico a torta html. Grafici svg a torta e a ciambella in HTML5 da zero
15.04.2019Internet, Wi-Fi, reti locali
Traduzione
Tutorial
I moduli sono un ottimo modo per aggiungere un po' di sapore agli elementi della tua pagina web. I cerchi sono particolarmente utili in questo senso perché sono olistici, semplici e simili a una torta. Ora seriamente, chi non ama la torta?
Come avrai notato dai tuoi anni di esperienza nell'uso di Internet, la maggior parte degli elementi nelle pagine web sono, infatti, quadrati o rettangoli. Pertanto, in alcuni casi, elementi interessanti come cerchi e triangoli nel tuo progetto possono essere molto utili. Questo tutorial dimostrerà come costruire un grafico a torta animato, simili a quelli che di solito vedi sui siti di portfolio. Questo può aiutarti a evidenziare visivamente le tue abilità, oltre a dimostrare quali attività sei in grado di gestire. Dai un'occhiata alla demo per vedere il risultato finale.
Quindi, cominciamo!
Quando scrivo questo tutorial, lavorerò con Circliful. È un plugin jQuery gratuito e open source. Puoi scaricare il file principale da Github. Include un file .js insieme a un foglio di stile CSS corrispondente. La pagina deve contenere entrambi per ottenere l'effetto cerchio.
Statistiche del cerchio animato - Demo di mostri modello
La mia pagina contiene un foglio di stile style.css simile per i miei stili CSS personali. Devi anche fare una copia della libreria jQuery. È necessario per il corretto funzionamento del plugin. Di per sé, la pagina è abbastanza facile da strutturare. Gli elementi Circle sono contenuti all'interno di tag div che utilizzano attributi HTML5 per manipolare i dati. In alternativa, possono essere conservati in Funzioni jQuery ma se vuoi un controllo migliore su ogni elemento, è più facile lavorare in HTML.
Photoshop
Illustratore
Effetti postumi
Questa è una copia della prima riga di cerchi, composta da 3 unità animate. Tutti questi attributi di dati sono ulteriormente spiegati nella documentazione del plugin. Ciascuno rappresenta un'opzione che definisce un effetto di animazione. do sotto breve descrizione opzioni che uso:
data-dimension - dimensione totale della larghezza/altezza del cerchio;
data-text - il testo che appare al centro di ogni cerchio;
data-width - spessore dell'arco dati rotante;
data-fontsize - dimensione del carattere del testo centrale;
data-percent - un numero da 0 a 100 che rappresenta le percentuali nella tua cerchia;
data-fgcolor - il colore di primo piano del cerchio;
data-bgcolor - colore di sfondo del cerchio;
data-fill - il riempimento interno del colore di sfondo del cerchio interno.
Layout di pagina CSS
Non insisto che tu modifichi direttamente jquery.circliful.css a meno che tu non voglia personalizzare il plugin, ovviamente. La maggior parte dei colori può essere modificata direttamente dagli attributi dei dati HTML5 e se vuoi davvero riscrivere uno degli stili circolare, ti consiglio di farlo nel tuo foglio di stile. Detto questo, ho creato il mio foglio di stile per il progetto dato, non per riscrivere gli stili circolare... La pagina web stessa ha bisogno di un layout predefinito che sia davvero facile da progettare. L'area del contenuto è centrata in una piccola sezione per un grafico a torta. Ogni area si muove liberamente all'interno del contenitore della linea all'interno dell'originale #stats div.
All'interno di ogni sezione, il contenuto è mantenuto all'interno .wrap div da fissare al centro. Inoltre, gli elementi del cerchio che si muovono liberamente necessitano di un contenitore aggiuntivo. .clearfix per mantenere tutto correttamente allineato.
Questa classe clearfixè noto da anni come soluzione per contenitori a movimento libero. Di solito vengono rimossi dal testo del documento e non conservano la loro larghezza/altezza originale. Ma questo mantiene costante la larghezza del contenitore #statistiche e lascia spazio a Di più contenuto che si troverà di seguito nella pagina.
Tocchi finali
Quindi, abbiamo impastato l'impasto, riempito la tortiera, messo in forno e siamo quasi pronti per assaggiarlo. Se tutto sembra abbastanza buono, qual è il passaggio finale? Abbiamo bisogno di codice jQuery per decorare questo progetto. Apri un nuovo tag di script in fondo a questo Pagine HTML... Conterrà un piccolo frammento di JavaScript. Poiché ho utilizzato tutti gli attributi dei dati HTML5, non è necessario chiamare alcuna opzione jQuery. Lo script deve solo eseguire la funzione circolare su ogni cerchio di div. Utilizzo di un nome di classe duplicato come .circlestat rende il processo molto semplice.
Per chi non ha familiarità con la struttura della sintassi jQuery, fornirò una breve descrizione. Dopo che il documento è stato caricato, eseguiamo nuova funzione... Il nostro obiettivo interiore è ogni elemento che utilizza la classe .circlestat ed esegue la funzione circolare ()... Questo porta il plugin circolare, che crea effetti di animazione, in azione e applica contenuti/colori aggiuntivi.
Non posso dire che questi cerchi rimarranno sempre la migliore soluzione... Ho visto molti portfolio basati su parole e numeri, ma non funzionano di per sé. Considera l'uso di questi cerchi in rare occasioni e prova a prenderli in prestito per scopi diversi dalle semplici abilità. Le tue statistiche non devono essere misurate in percentuale: possono mostrare da quanti anni sei in attività, il numero totale di progetti che hai o altri numeri simili. Puoi scaricare gratuitamente una copia del mio tutorial e sperimentare il codice per renderlo migliore per i tuoi progetti.
Benchè grafici a torta sono il modo più comune di presentare le informazioni, che vanno dalle semplici statistiche agli indicatori di avanzamento e ai timer, anche nella loro forma più semplice a due colori, sono stati tradizionalmente creati in modo diverso dai semplici metodi che utilizzano le tecnologie web. Di solito, per la loro attuazione, o esterni editore grafico per aver creato più immagini per più valori del grafico a torta o framework JavaScript per la creazione di diagrammi più complessi.
Sebbene ora il compito non sembri impossibile come prima, non esiste ancora una soluzione semplice e univoca. Tuttavia, ce ne sono di migliori oggi (rispetto ai metodi sopra), modi più supportati per implementare i grafici a torta.
Una soluzione basata sulla trasformazione
Questa soluzione è la migliore in termini di markup: ha bisogno di un solo elemento e tutto il resto verrà fatto utilizzando pseudo-elementi, trasformazioni e gradienti CSS... Partiamo da un semplice elemento:
Ora, supponiamo di volere un grafico a torta che mostri hardcoded 20%
... Lavoreremo per renderlo flessibile in seguito. Per prima cosa, modelleremo l'elemento come un cerchio, che sarà il nostro sfondo (Figura 1):
Figura 1 - Il nostro punto di partenza (grafico a torta che mostra lo 0%) .pie (larghezza: 100px; altezza: 100px; bordo-raggio: 50%; sfondo: gialloverde;)
Il nostro grafico a torta sarà verde (più specificamente gialloverde) con un settore marrone (#655) che mostra la percentuale. Potremmo essere tentati di utilizzare trasformazioni oblique per la percentuale, ma come mostra un po' di sperimentazione, questa sarebbe una soluzione piuttosto sciatta. Invece, coloreremo i lati sinistro e destro del nostro cerchio con due colori e usa rotazione dello pseudo-elemento per rivelare solo la frazione del cerchio di cui abbiamo bisogno.
Per colorare di marrone il lato destro del nostro cerchio, utilizzeremo un semplice gradiente lineare:
Immagine di sfondo: gradiente lineare (a destra, trasparente 50%, # 655 0); Figura 2 - Colorare il lato destro del nostro cerchio di marrone con un semplice gradiente lineare
Come puoi vedere nella Figura 2, è tutto ciò di cui avevamo bisogno. Ora possiamo iniziare a disegnare lo pseudo-elemento che fungerà da maschera:
Torta :: prima (contenuto: ""; display: blocco; margine sinistro: 50%; altezza: 100%;) Figura 3 - Lo pseudo-elemento che funge da maschera è qui evidenziato con un bordo tratteggiato
Nella Figura 3, puoi vedere come in questo momento il nostro pseudo-elemento si trova rispetto all'elemento del grafico a torta. Ora non è ancora stilizzato e non svolge alcuna funzione. È solo un rettangolo invisibile. Prima di iniziare a modellarlo, facciamo alcuni commenti:
come vogliamo nascondi la parte marrone del nostro cerchio, allora dobbiamo applicare allo pseudo-elemento sfondo verde using background-color: eredita per evitare la duplicazione quando gli si assegna lo stesso colore di sfondo di elemento genitore;
lo vogliamo ruotava intorno al centro del cerchio che si trova al centro del lato sinistro dello pseudo-elemento, quindi dobbiamo impostare l'origine della trasformazione a 0 50% o semplicemente a sinistra;
non vogliamo che sia un rettangolo in quanto traboccherà dai bordi della torta, quindi dobbiamo applicare overflow: nascosto al .pie o dargli un bordo-raggio per renderlo un semicerchio.
Mettendo tutto insieme, otteniamo il seguente stile per il nostro pseudo-elemento;
Torta :: prima (contenuto: ""; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0/50%; background-color: inherit; transform-origin: a sinistra;) Figura 4 - Il nostro pseudo-elemento (mostrato con un bordo tratteggiato) dopo aver terminato lo styling
Nota: non utilizzare background: inherit; invece di backround-color: inherit;, poiché questo erediterà il gradiente!
Il nostro grafico a torta ora assomiglia alla Figura 4. È qui che inizia il divertimento! possiamo iniziare ruota pseudo elemento applicando la trasformazione ruotare(). Per 20%
stiamo cercando di implementare, possiamo usare 72deg (0,2 × 360 = 72), o 2turn che è più leggibile. Nella Figura 5, puoi vedere come questo cerca anche molti altri valori.
Figura 5 - Il nostro semplice grafico a torta che mostra diverse percentuali, da sinistra a destra: 10% (36 gradi o 1 giro), 20% (72 gradi o 2 giri), 40% (144 gradi o 4 giri)
Potresti pensare che il lavoro sia finito, ma, sfortunatamente, non tutto è così semplice. Il nostro grafico a torta è ottimo per visualizzare percentuali da 0 a 50%, ma se proviamo a visualizzare una rotazione del 60% (usando 6turn), otteniamo ciò che viene mostrato nella Figura 6. Ma non perdere la speranza, possiamo risolvere questo problema .e facciamolo!
Figura 6 - Il nostro grafico a torta si scompone per le azioni più del 50%(mostrato qui per il 60%)
Se consideriamo la visualizzazione delle condivisioni 50% -100% come un problema separato, allora puoi vedere che per loro possiamo usare una versione invertita della soluzione precedente: pseudo-elemento marrone rotante rispettivamente da 0 a 5turn. Quindi, per una quota del 60%, il codice dello pseudo-elemento sarà simile a questo:
Torta :: prima (contenuto: ""; display: blocco; margine sinistro: 50%; altezza: 100%; raggio del bordo: 0 100% 100% 0/50%; sfondo: # 655; origine trasformazione: sinistra ;trasformare: ruotare (.1turn);) Figura 7 - Il nostro grafico a torta ora corretto con un valore del 60%
Nella Figura 7, puoi vedere il codice in azione. Da ora abbiamo sviluppato un modo per visualizzare qualsiasi percentuale, possiamo e animare un grafico a torta dallo 0% al 100% con usando i CSS animazioni creando una sorta di indicatore di avanzamento:
@keyframes spin (to (trasformare: ruotare (.5turn);)) @keyframes bg (50% (background: # 655;)) .pie :: before (content: ""; display: block; margin-left: 50 %; altezza: 100%; raggio del bordo: 0 100% 100% 0/50%; colore di sfondo: eredita; origine della trasformazione: sinistra; animazione: rotazione 3s lineare infinito, bg 6s step-end infinito;)
Va bene, ma come stiliamo più grafici a torta statici con percentuali diverse, che è il massimo? caso generale usando i grafici? Idealmente, vogliamo essere in grado di stampare qualcosa del genere:
20%
60%
E ottieni due grafici a torta, uno che mostra il 20% e l'altro che mostra il 60%. Per prima cosa, vedremo come possiamo farlo usando gli stili in linea, e poi possiamo sempre scrivere un breve script da analizzare contenuto del testo e aggiungi gli stili inline specificati per l'eleganza del codice, l'incapsulamento, la manutenibilità e, forse, la cosa più importante, l'accessibilità.
La parte difficile del controllo della percentuale di un grafico a torta con stili in linea è che il CSS responsabile dell'impostazione della percentuale è impostato su uno pseudo elemento. Come già sai, non possiamo impostare stili in linea su pseudo-elementi, Ecco perché dovremo essere più fantasiosi.
Nota: Per uso valori dallo spettro dei colori nessuna ripetizione e calcoli complessi puoi usare il metodo qui sotto. Puoi usare questo metodo anche in altri casi. Di seguito è riportato un semplice esempio isolato dell'utilizzo di questa tecnica.
La soluzione arriva da uno dei posti più inaspettati. Useremo l'animazione che è già stata mostrata, ma che verrà messa in pausa. Invece di eseguirlo come una normale animazione, utilizzeremo ritardi di animazione negativi per imposta una posizione in qualsiasi punto dell'animazione e rimani lì. Sei sorpreso? Sì, i valori di ritardo dell'animazione negativi non sono consentiti solo nelle specifiche, ma sono molto utili in questi casi.
Poiché la nostra animazione è in pausa, verrà mostrato solo il suo primo fotogramma (determinato dal nostro valore negativo animazione-ritardo). La percentuale mostrata nel grafico a torta sarà uguale alla percentuale che il nostro ritardo di animazione fa nella durata totale. Ad esempio, con una durata attuale di 6 secondi, abbiamo bisogno di un ritardo di animazione di -1,2 secondi per mostrare una frazione del 20%. Per semplificare i calcoli, imposteremo la durata a 100s. Tieni presente che poiché l'animazione è interrotta in modo permanente, il valore che impostiamo per la sua durata non svolge nessun altro ruolo.
E l'ultima domanda: l'animazione viene applicata allo pseudo-elemento, ma vogliamo impostare lo stile in linea sull'elemento .pie... Tuttavia, sebbene acceso
nessuna animazione, possiamo impostare il ritardo dell'animazione come stile in linea e quindi utilizzare il ritardo dell'animazione: inherit; per uno pseudo elemento. Mettendo tutto insieme, il nostro markup per i grafici a torta del 20% e del 60% si presenta così:
E il codice CSS per questa animazione diventa il seguente (le regole per .pie non vengono mostrate, poiché rimangono le stesse):
@keyframes spin (to (trasformare: ruotare (.5turn);)) @keyframes bg (50% (sfondo: # 655;)) .pie :: before (/ * [gli altri stili non sono cambiati] * / animation: spin 50s lineare infinito, bg 100s step-end infinito; animazione-play-state: in pausa; animazione-delay: eredita;)
Per ora, possiamo convertire il markup per utilizzare le percentuali come contenuto, come originariamente previsto, e aggiungere stili di ritardo dell'animazione in linea tramite un semplice script:
$$ (". torta"). forEach (funzione (torta) (var p = parseFloat (pie.textContent); pie.style.animationDelay = "-" + p + "s";));
Si prega di notare che abbiamo lasciato intatto il testo in quanto ne abbiamo bisogno per l'accessibilità e l'usabilità. I nostri grafici a torta ora assomigliano alla Figura 8. Dobbiamo nascondere il testo che può essere reso disponibile tramite il colore: trasparente in modo che rimanga selezionabile e stampabile... Per una maggiore lucentezza, possiamo posiziona i valori percentuali al centro del grafico a torta in modo che non siano in posto casuale quando l'utente cerca di evidenziarli. Per fare ciò, abbiamo bisogno di:
Figura 8 - Il nostro testo prima di nasconderlo
convertire il valore dell'altezza del grafico in altezza della linea (o aggiungere un valore dell'altezza della linea uguale all'altezza, ma questa sarebbe una duplicazione inutile del codice, poiché l'altezza della linea verrà impostata sul valore dell'altezza calcolata, il che è positivo) ;
imposta la dimensione e la posizione dello pseudo elemento con posizionamento assoluto in modo che non spinga il testo verso il basso;
aggiungi allineamento testo: centro; per centrare il testo orizzontalmente.
Il codice finale è simile a questo:
Torta (posizione: relativa; larghezza: 100 px; altezza della linea: 100 px; raggio del bordo: 50%; sfondo: gialloverde; immagine di sfondo: gradiente lineare (a destra, trasparente 50%, # 655 0); colore: trasparente ; text-align: center;) @keyframes spin (to (transform: rota (.5turn);)) @keyframes bg (50% (background: # 655;)) .pie :: before (content: ""; position : assoluto; superiore: 0; sinistra: 50%; larghezza: 50%; altezza: 100%; raggio di bordo: 0 100% 100% 0/50%; colore di sfondo: eredita; origine di trasformazione: sinistra; animazione: spin 50s linear infinito, bg 100s step-end infinito; animazione-play-state: in pausa; animazione-delay: inherit;)
Soluzione basata su SVG
SVG prende la decisione di molti compiti di grafica più semplici e i grafici a torta non fanno eccezione. Tuttavia, invece di creare un grafico a torta utilizzando i tracciati, che richiederebbe calcoli matematici complicati, utilizzeremo un piccolo trucco.
Iniziamo con un cerchio:
Ora applichiamo alcuni stili di base ad esso:
Cerchio (riempimento: gialloverde; tratto: # 655; larghezza del tratto: 30;)
Nota: Come sai, questi Le proprietà CSS sono disponibili anche come attributi Elementi SVG che potrebbero tornare utili se il porting fosse un problema.
Figura 9 - Il nostro punto di partenza: un cerchio SVG verde con un tratto spesso # 655
Potete vedere il nostro cerchio delineato nella Figura 9. I tratti in SVG sono costituiti da più delle proprietà del tratto e della larghezza del tratto. Ci sono molte altre proprietà legate al tratto meno popolari che ti permettono di mettere a punto il loro aspetto. Uno di questi è stroke-dasharray, che serve per creare tratti tratteggiati. Ad esempio, potremmo usarlo per fare questo:
Colpo-dasharray: 20 10; Figura 10 - Tratto tratteggiato semplice creato con stroke-dasharray
Ciò significa che vogliamo un trattino di lunghezza 20 con spazi di lunghezza 10, come quelli mostrati nella Figura 10. A questo punto, potresti essere sorpreso che questo esempio SVG abbia qualcosa a che fare con i grafici a torta. Ma le cose diventano più chiare quando applichiamo un tratto con un trattino di 0 e spazi più lunghi di o uguale lunghezza la circonferenza del nostro cerchio (C = 2πr, o nel nostro caso C = 2π × 30 ≈ 189):
Tratto-dasharray: 0 189; Figura 11 - Diversi valori di tratto-dasharray e il loro risultato; da sinistra a destra: 0 189; 40 189; 95 189; 150 189
Come puoi vedere, nel primo cerchio in Figura 11, questo rimuove completamente il tratto e ci rimane solo il cerchio verde. Il divertimento inizia però quando iniziamo ad aumentare il primo valore (Figura 11): a causa di un gap così lungo, non otterremo più tratto punteggiato, ma un tratto che copre tutta la circonferenza del cerchio da noi specificata.
Potresti aver già capito in che direzione ci stiamo muovendo: se riduciamo il raggio del nostro cerchio abbastanza da oscurare completamente il suo tratto, finiremo con qualcosa di molto simile a un grafico a torta. Ad esempio, nella Figura 12, puoi vedere come apparirebbe se applicato a un cerchio con un raggio di 25 e una larghezza del tratto di 50:
Figura 12 - La nostra immagine SVG inizia ad assomigliare a un grafico a torta
Ricorda: i tratti SVG sono sempre metà all'interno e metà all'esterno dell'elemento a cui sono applicati. In futuro, saremo in grado di controllare questo comportamento.
Ora trasformare questa immagine in un grafico a torta come quello che abbiamo creato nella soluzione precedente è abbastanza semplice: devi solo aggiungere un cerchio verde più grande per il tratto e ruotalo di 90° in senso antiorario in modo che inizi in alto nel mezzo. Nella misura in cui
Svg (trasformazione: rotazione (-90 gradi); sfondo: gialloverde; bordo-raggio: 50%;) Figura 13 - Grafico a torta finale con SVG
Puoi vedere il risultato finale nella Figura 13. Questo metodo rende ancora più semplice animare il grafico a torta dallo 0% al 100%. Abbiamo solo bisogno di creare un'animazione CSS che cambi il tratto-dasharray da 0 158 a 158 158:
Come ulteriore raffinamento, possiamo impostare un certo raggio del cerchio in modo che la sua circonferenza sia (infinitamente vicina a) 100, quindi possiamo specifica le lunghezze del tratto-dasharray come percentuali, senza calcoli. Poiché la circonferenza è 2πr, abbiamo bisogno di un raggio di 100 ÷ 2π ≈ 15.915494309, che per le nostre esigenze può essere arrotondato a 16. Impostiamo anche le dimensioni dell'SVG nell'attributo viewBox, invece di attributi di larghezza e altezza per renderlo ridimensionabile alle dimensioni del suo contenitore.
Con queste modifiche, il markup per il grafico a torta mostrato nella Figura 13 diventa:
E il CSS sarà così:
Svg (larghezza: 100 px; altezza: 100 px; trasformazione: rotazione (-90 gradi); sfondo: verde giallo; raggio del bordo: 50%;) cerchio (riempimento: verde giallo; tratto: # 655; larghezza del tratto: 32; tratto-dasharray : 38 100; / * per il 38% * /)
Nota, quanto è facile adesso cambiare la percentuale... Anche con questa semplificazione eccessiva, tuttavia, non vogliamo ripetere tutto questo markup SVG per ogni grafico a torta. È tempo che JavaScript ci aiuti con un po' di automazione. Scriveremo un piccolo script per prendere un semplice markup HTML come questo ...
20%
60%
E aggiungi SVG in linea all'interno di ogni elemento .pie con all elementi essenziali e attributi. Aggiungerà anche l'elemento
per l'accessibilità in modo che gli utenti <a href="https://bumotors.ru/it/skachat-golosovoi-dvizhok-dlya-android-ekrannyi-diktor-dlya.html">lettori dello schermo</a> potrebbe anche scoprire quali percentuali vengono visualizzate. Lo script finale sarà simile a questo:</p><p>$$ (". pie"). forEach (function (pie) (var p = parseFloat (pie.textContent); var NS = "http://www.w3.org/2000/svg"; var svg = document. createElementNS (NS, "svg"); var circle = document.createElementNS (NS, "circle"); var title = document.createElementNS (NS, "title"); circle.setAttribute ("r", 16); circle. setAttribute ("cx", 16); circle.setAttribute ("cy", 16); circle.setAttribute ("stroke-dasharray", p + "100"); svg.setAttribute ("viewBox", "0 0 32 32 "); title.textContent = pie.textContent; pie.textContent =" "; svg.appendChild (titolo); svg.appendChild (cerchio); pie.appendChild (svg);));</p><p>Ecco qui! Potresti pensare che <a href="https://bumotors.ru/it/podklyuchenie-stilei-css-kak-podklyuchit-css-metody-i-sposoby-podklyuchenii.html">Metodo CSS</a> meglio poiché il suo codice è più semplice e familiare. Tuttavia, il metodo SVG presenta alcuni vantaggi rispetto alla pura soluzione CSS:</p><ul><li><b>è più facile aggiungere un terzo colore</b>: aggiungi semplicemente un altro cerchio delineato e sposta il suo tratto con stroke-dashoffset. Oppure aggiungi la sua lunghezza del tratto alla lunghezza del tratto del cerchio precedente di fronte (sotto) ad esso. Come aggiungeresti esattamente il terzo colore al grafico a torta creato nel primo modo?</li><li>noi <b>non dovrebbe fare alcuno sforzo in più nella stampa</b> poiché gli elementi SVG sono trattati come contenuto e stampati allo stesso modo degli elementi <img>... La prima soluzione dipende dallo sfondo e quindi non verrà stampata;</li><li>noi possiamo <b>cambia i colori usando gli stili in linea</b> il che significa che possiamo facilmente cambiarli tramite <b>script</b>(cioè a seconda di <b>input dell'utente</b>). La prima soluzione si basa su pseudo-elementi, che non possono accettare stili in linea se non attraverso l'ereditarietà, il che non è sempre conveniente.</li> sfondo: gradiente conico (# 655 attr (data-value%), gialloverde 0); <p>Rende anche incredibile <a href="https://bumotors.ru/it/how-to-add-a-photo-in-contact-a-few-simple-waysssss.html">semplice addizione</a> terzo colore. Ad esempio, per un grafico a torta, <a href="https://bumotors.ru/it/modelirovanie-informacionnyh-sistem-podobnymi-diagrammami-mozhno.html">diagramma simile</a> sopra, aggiungeremmo solo altre due interruzioni di colore:</p><p>Fondo: conico-gradiente (deeppink 20%, # fb3 0, # fb3 30%, yellowgreen 0);</p><p>È tutto! Lascia i tuoi commenti!</p></ul>
<p>Probabilmente ti sei imbattuto in questi indicatori di caricamento, specialmente sui siti Flash. Questo è un settore di un cerchio che diventa sempre più grande fino a diventare un cerchio completo.</p>
<p>A prima vista, il compito sembra semplice: creare un cerchio, ruotarlo e nascondere la parte dietro una maschera. Ma in realtà, tutto si rivela un po' più complicato. CSS non è preparato per tali attività, anche quando si utilizzano preprocessori come SASS e Compass. Facciamo sempre fatica quando dobbiamo creare forme diverse, e specialmente quando definiamo stili e animazioni per loro. La maggior parte del tempo di lavoro è dedicato a questo. per far funzionare qualcosa e sacrificare la semantica del codice e il suo supporto.</p>
<h2>Perché lo facciamo?</h2>
<p>L'uso più probabile di tali elementi è il timer. Ma <a href="https://bumotors.ru/it/koncepciya-hranilishcha-dannyh-fizicheskie-i-virtualnye.html">questo concetto</a> può essere utilizzato per creare un grafico a torta in un CSS.</p>
<p>Sebbene ci siano alcuni strumenti sorprendenti per manipolare i grafici a torta (principalmente in JavaScript), creeremo comunque un tale elemento solo in CSS e lo animeremo anche con alcuni trucchi.</p>
<p>La semantica del codice sarà così così! Ma l'accompagnamento può essere reso abbastanza conveniente.</p>
<h2>HTML</h2>
<p>Abbiamo bisogno di 3 diversi elementi:</p>
<ul><li><b>filatore:</b> metà del cerchio che ruoterà;</li>
<li><b>maschera:</b> questo elemento nasconde il cerchio rotante durante il primo 50% dell'animazione;</li>
<li><b>riempitivo:</b> questo elemento riempie il cerchio durante l'ultimo 50% dell'animazione.</li>
</ul><p>E tutti e tre gli elementi devono avere lo stesso genitore per il posizionamento assoluto:</p>
<p> <div class="wrapper">
<div class="spinner pie"></div>
<div class="filler pie"></div>
<div class="mask"></div>
</div></p>
<p>Poiché spinner e filler sono due metà dello stesso cerchio, useremo la classe .pie per loro.</p>
<h2>CSS</h2>
<p>Il genitore è di taglia e <a href="https://bumotors.ru/it/css-raspolozhenie-elementov-css---pozicionirovanie-blokov.html">posizionamento assoluto</a> contesto per il timer:</p>
<p>Wrapper (larghezza: 250 px; altezza: 250 px; posizione: relativa; sfondo: bianco;)</p>
<p>È importante che la larghezza e l'altezza siano uguali per ottenere il cerchio e tutto funzioni.</p>
<p>Gli elementi spinner e filler usano <a href="https://bumotors.ru/it/velcom-kody-nomerov-baza-dannyh-mts.html">codice dato</a> CSS:</p>
<p>Torta (larghezza: 50%; altezza: 100%; posizione: assoluta; sfondo: # 08C; bordo: 10px rgba solido (0,0,0,0.4);)</p>
<p>Hanno una larghezza pari al 50% dell'elemento genitore, quindi sono due parti dello stesso cerchio e la loro altezza è uguale all'altezza dell'elemento genitore. Definiamo anche lo stesso colore e cornice per loro.</p>
<h3>Elemento rotante</h3>
<p>Spinner (border-radius: 125px 0 0 125px; z-index: 200; border-right: nessuno; animazione: rota 10s linear infinite;)</p>
<p>Rendilo un semicerchio usando la proprietà border-radius negli angoli in alto a sinistra e in basso a sinistra. Definiamo anche uno z-index positivo per posizionarlo sopra l'elemento di riempimento, ma sotto la maschera.</p>
<p>Quindi aggiungi l'animazione per 10 secondi. Parleremo più avanti dell'animazione.</p>
<h3>elemento di riempimento</h3>
<p>Filler (border-radius: 0 125px 125px 0; z-index: 100; border-left: nessuno; animazione: riempi passi di 10s (1, end) infinito; left: 50%; opacity: 0;)</p>
<p>Per questo elemento, imposta il raggio del bordo e l'indice z, rimuovi il bordo sinistro e animalo per 10 secondi. Per un dato elemento, la funzione di temporizzazione dell'animazione non ottiene un valore lineare, ma passaggi (1, fine). Ciò significa che l'animazione verrà eseguita istantaneamente.</p>
<p>Poiché l'elemento di riempimento non dovrebbe essere visibile durante la prima metà dell'animazione, la sua opacità sarà 0 e la sua posizione sarà il 50% della larghezza dell'elemento genitore.</p>
<h3>L'elemento "maschera"</h3>
<p>Maschera (larghezza: 50%; altezza: 100%; posizione: assoluta; z-index: 300; opacità: 1; sfondo: eredita; animazione: maschera passi di 10s (1, fine) infinito;)</p>
<p>La maschera è presente dall'inizio dell'animazione, quindi la sua opacità è impostata su 1 e lo sfondo è ereditato dal genitore (in modo che sia invisibile). Per coprire l'elemento rotante, avrà le stesse dimensioni e la proprietà z-index è impostata su 300.</p>
<h3>Fotogrammi di animazione</h3>
<p>@keyframes rota (0% (trasforma: ruota (0deg);) 100% (trasforma: ruota (360deg);)) @keyframes fill (0% (opacità: 0;) 50%, 100% (opacità: 1;) ) @keyframes mask (0% (opacità: 1;) 50%, 100% (opacità: 0;))</p>
<p>La prima animazione (rota) viene utilizzata per l'elemento della trottola. Ruota gradualmente da 0 a 360 gradi in 10 secondi.</p>
<p>La seconda animazione (riempimento) viene utilizzata per l'elemento di riempimento. Cambia immediatamente l'opacità da 0 a 1 dopo 5 secondi.</p>
<p>L'ultima animazione (maschera) viene utilizzata per l'elemento maschera. Cambia immediatamente l'opacità da 1 a 0 dopo 5 secondi.</p>
<p>L'animazione è simile a questa:</p>
<ul><li><b>T0</b>- lo spinner è a sinistra, nascosto dalla maschera. L'elemento di riempimento è nascosto.</li>
<li><b>T1</b>- la trottola inizia a girare in senso orario e compare lentamente da dietro la maschera.</li>
<li><b>T2</b>- la trottola r viene ruotata di 360/10 * 2 = 72° e continua a ruotare.</li>
<li><b>T3</b>- la trottola viene ruotata di 360/10 * 3 = 108 ° e continua a ruotare.</li>
<li><b>T4</b>- la trottola viene ruotata di 360/10 * 4 = 144° e continua a ruotare.</li>
<li><b>T5</b>- la trottola viene ruotata di 360/10 * 5 = 180° e continua a ruotare. A questo punto, l'elemento di riempimento è immediatamente visibile e la maschera è nascosta.</li>
<li><b>T6</b>- la trottola viene ruotata di 360/10 * 6 = 216° e continua a ruotare.</li>
<li><b>T7</b>- la trottola viene ruotata di 360/10 * 7 = 252° e continua a ruotare.</li>
<li><b>T8</b>-la trottola viene ruotata di 360/10*8 = 288° e continua a ruotare.</li>
<li><b>T9</b>- la trottola viene ruotata di 360/10 * 9 = 324° e continua a ruotare.</li>
<li><b>T10</b>- la trottola è ruotata di 360°. Siamo tornati al punto di partenza. Ripristino dell'animazione. Viene visualizzata la maschera e l'elemento di riempimento è nascosto.</li>
</ul><h2>Bonus</h2>
<p>Alcuni trucchi aggiuntivi.</p>
<h3>Pausa al passaggio del mouse</h3>
<p>Wrapper: hover .filler, .wrapper: hover .spinner, .wrapper: hover .mask (animazione-play-state: in pausa;)</p>
<p>Con questo codice, puoi interrompere tutte le animazioni quando passi con il mouse sull'elemento padre.</p>
<h3>Inserisci contenuto</h3>
<p>Grazie alla proprietà z-index, possiamo facilmente aggiungere del contenuto allo spinner e farlo girare. Prova il seguente codice:</p>
<p>Spinner: dopo (contenuto: ""; posizione: assoluta; larghezza: 10px; altezza: 10px; bordo-raggio: 50%; in alto: 10px; destra: 10px; sfondo: #fff; bordo: 1px solido rgba (0,0 , 0,0.4); box-shadow: inset 0 0 3px rgba (0,0,0,0.2);)</p>
<h2>Preprocessore o variabili CSS</h2>
<p>Attualmente, il codice è molto difficile da mantenere. Ma se usiamo variabili (nel preprocessore o interno previsto <a href="https://bumotors.ru/it/peremennye-v-html-kode-nativnye-peremennye-v-css-uzhe-pora.html">variabili CSS</a>), tutto può diventare molto più semplice. Ad esempio, puoi aggiungere variabili per controllare la durata invece di fissare il codice nelle 3 definizioni di animazione.</p>
<p>Se vuoi migliorare la manutenibilità del tuo codice senza usare i preprocessori, puoi creare una classe con un controllo della durata dell'animazione e aggiungerla a 3 figli. Ad esempio così:</p>
<p>Durata dell'animazione (durata dell'animazione: 10s;)</p>
<p> <div class="wrapper">
<div class="spinner pie animation-duration"></div>
<div class="filler pie animation-duration"></div>
<div class="mask animation-duration"></div>
</div></p>
<h2>Screpolatura</h2>
<p>Questa tecnica presenta diversi svantaggi:</p>
<ul><li>I gradienti non sono supportati.</li>
<li>Le ombre non sono supportate.</li>
<li>Nessuna adattabilità. Se l'elemento genitore viene ridimensionato, tutto andrà bene, tranne il raggio dell'arrotondamento del bordo. Dovrà essere modificato manualmente.</li>
<li>Nessuna semantica (4 elementi per un'animazione).</li>
</ul><h2>Supporto browser</h2>
<p>Dal momento che stiamo usando <a href="https://bumotors.ru/it/zaderzhka-animacii-css3-primery---obratnaya-animaciya-css-kratkaya.html">Animazioni CSS</a>, quindi il supporto del browser è piuttosto scarso:</p>
<ul><li>Internet Explorer 10</li>
<li>Firefox 12+</li>
<li>Cromo</li>
<li>Safari 5+</li>
<li>Opera 12+</li>
<li>iOS Safari 3+</li>
<li>Android 2+</li>
</ul>
<ul><li>Traduzione</li><li>Tutorial</li>
</ul><p>I moduli sono un ottimo modo per aggiungere un po' di sapore agli elementi della tua pagina web. I cerchi sono particolarmente utili in questo senso perché sono olistici, semplici e simili a una torta. Ora seriamente, chi non ama la torta?</p><p>Come avrai notato dai tuoi anni di esperienza nell'uso di Internet, la maggior parte degli elementi nelle pagine web sono, infatti, quadrati o rettangoli. Pertanto, in alcuni casi, elementi interessanti come cerchi e triangoli nel tuo progetto possono essere molto utili. Questo tutorial dimostrerà come costruire un grafico a torta animato simile a quelli che di solito vedi sui siti di portfolio. Questo può aiutarti a evidenziare visivamente le tue abilità, oltre a dimostrare quali attività sei in grado di gestire. Dai un'occhiata alla demo per vedere il risultato finale.</p><h3>Quindi, cominciamo!</h3>Quando scrivo questo tutorial, lavorerò con Circliful. È un plugin jQuery gratuito e open source. Puoi scaricare il file principale da Github. Include un file .js insieme a un foglio di stile CSS corrispondente. La pagina deve contenere entrambi per ottenere l'effetto cerchio. <p> <pre lang="PHP" line="1"><!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Statistiche del cerchio animato - Demo di mostri modello
La mia pagina contiene un foglio di stile style.css simile per i miei stili CSS personali. Devi anche fare una copia della libreria jQuery. È necessario per il corretto funzionamento del plugin. Di per sé, la pagina è abbastanza facile da strutturare. Gli elementi Circle sono contenuti all'interno di tag div che utilizzano attributi HTML5 per manipolare i dati. In alternativa, possono essere archiviati in una funzione jQuery, ma se si desidera un controllo migliore su ciascun elemento, è più semplice lavorare in HTML.
Photoshop
Illustratore
Effetti postumi
Questa è una copia della prima riga di cerchi, composta da 3 unità animate. Tutti questi attributi di dati sono ulteriormente spiegati nella documentazione del plugin. Ciascuno rappresenta un'opzione che definisce un effetto di animazione. Di seguito è riportata una breve descrizione delle opzioni che utilizzo:
data-dimension - dimensione totale della larghezza/altezza del cerchio;
data-text - il testo che appare al centro di ogni cerchio;
data-width - spessore dell'arco dati rotante;
data-fontsize - dimensione del carattere del testo centrale;
data-percent - un numero da 0 a 100 che rappresenta le percentuali nella tua cerchia;
data-fgcolor - il colore di primo piano del cerchio;
data-bgcolor - colore di sfondo del cerchio;
data-fill - il riempimento interno del colore di sfondo del cerchio interno.
Layout di pagina CSS
Non insisto che tu modifichi direttamente jquery.circliful.css a meno che tu non voglia personalizzare il plugin, ovviamente. La maggior parte dei colori può essere modificata direttamente dagli attributi dei dati HTML5 e se vuoi davvero riscrivere uno degli stili circolare, ti consiglio di farlo nel tuo foglio di stile. Detto questo, ho creato il mio foglio di stile per il progetto dato, non per riscrivere gli stili circolare... La pagina web stessa ha bisogno di un layout predefinito che sia davvero facile da progettare. L'area del contenuto è centrata in una piccola sezione per un grafico a torta. Ogni area si muove liberamente all'interno del contenitore della linea all'interno dell'originale #stats div.
All'interno di ogni sezione, il contenuto è mantenuto all'interno .wrap div da fissare al centro. Inoltre, gli elementi del cerchio che si muovono liberamente necessitano di un contenitore aggiuntivo. .clearfix per mantenere tutto correttamente allineato.
Questa classe clearfixè noto da anni come soluzione per contenitori a movimento libero. Di solito vengono rimossi dal testo del documento e non conservano la loro larghezza/altezza originale. Ma questo mantiene costante la larghezza del contenitore #statistiche e lascia spazio a più contenuti per scorrere la pagina.
Tocchi finali
Quindi, abbiamo impastato l'impasto, riempito la tortiera, messo in forno e siamo quasi pronti per assaggiarlo. Se tutto sembra abbastanza buono, qual è il passaggio finale? Abbiamo bisogno di codice jQuery per decorare questo progetto. Apri un nuovo tag di script in fondo a questa pagina HTML. Conterrà un piccolo frammento di JavaScript. Poiché ho utilizzato tutti gli attributi dei dati HTML5, non è necessario chiamare alcuna opzione jQuery. Lo script deve solo eseguire la funzione circolare su ogni cerchio di div. Utilizzo di un nome di classe duplicato come .circlestat rende il processo molto semplice.
Per chi non ha familiarità con la struttura della sintassi jQuery, fornirò una breve descrizione. Dopo che il documento è stato caricato, eseguiamo una nuova funzione. Il nostro obiettivo interiore è ogni elemento che utilizza la classe .circlestat ed esegue la funzione circolare ()... Questo porta il plugin circolare, che crea effetti di animazione, in azione e applica contenuti/colori aggiuntivi.
Non posso dire che questi cerchi saranno sempre la soluzione migliore. Ho visto molti portfolio basati su parole e numeri, ma non funzionano di per sé. Considera l'uso di questi cerchi in rare occasioni e prova a prenderli in prestito per scopi diversi dalle semplici abilità. Le tue statistiche non devono essere misurate in percentuale: possono mostrare da quanti anni sei in attività, il numero totale di progetti che hai o altri numeri simili. Puoi scaricare gratuitamente una copia del mio tutorial e sperimentare il codice per renderlo migliore per i tuoi progetti.
La "cucina" di uno sviluppatore web è un po' come la cucina casalinga. Lo sviluppatore ha accesso a una varietà di librerie da codice finito che lo aiuterà a creare un'applicazione web più o meno allo stesso modo in cui uno chef a casa può usare cibi pronti per cucinare il suo piatto in modo più efficiente. In entrambi i casi, la qualità degli articoli già preparati dovrebbe essere molto importante. Tuttavia, a volte la qualità viene sacrificata per la convenienza. Non fraintendetemi, la comodità non è sempre una cosa negativa. Può essere utile quando i pro ei contro sono noti e ben analizzati. Analizzando le opzioni per i grafici a torta e ad anello in HTML, possiamo solo evidenziarne alcune:
Grafico basato su elementi Canvas generato sul client (es. JavaScript)
Un diagramma basato su SVG e generato sul client (es. JavaScript)
Server grafico basato su SVG generato
Librerie pronte all'uso che utilizzano Canvas e JavaScript SVG
Le librerie JavaScript per disegnare diagrammi sono spesso più convenienti e caricate con una serie di fantastiche opzioni come l'interattività. Ecco alcune librerie:
D3.js
Chartist.js
Grafici di Google
Poche righe di JavaScript e una serie di dati ti permetteranno di creare un diagramma sul tuo sito web in pochi secondi. Non sorprende che molti scelgano questa strada.
Allora perché preoccuparsi e codificarli da soli? Questa è una bella domanda che mi sono posto anche io. Alla fine mi sono convinto di tre cose:
La maggior parte delle librerie JavaScript è difficile da trovare, specialmente quelle basate sull'elemento Canvas (ad eccezione di Google Charts)
Se le informazioni nel diagramma sono molto importanti (come lo era nella mia situazione), dovremmo fare affidamento su uno script in esecuzione sul client per generare le informazioni? Non la penso così.
Se scavo più a fondo nel codice SVG e mi sporco le mani, potrei imparare qualcosa in più sull'assurdità magica sottostante. In altre parole, il processo di apprendimento può essere divertente e vale la pena.
La mia situazione
Il mio team aveva bisogno di un componente semplice che potesse essere costruito sul server e visualizzato informazioni semplici sull'utilizzo degli account. Inoltre, la nostra preferenza è stata per la leggerezza di questo componente (evita JavaScript se possibile); non doveva essere eccessivamente sofisticato o interattivo, doveva solo visualizzare dati importanti.
Nota aggiuntiva sui grafici basati su tela
Potresti aver notato (se hai familiarità con la creazione di grafici per il Web) che non ho incluso Chart.js nell'elenco delle librerie consigliate sopra. Anche se puoi sicuramente usarlo, vale la pena ricordare che Chart.js utilizza un elemento Canvas per eseguire il rendering dei suoi grafici e che il contenuto dell'elemento non fa parte del DOM. Pertanto, non sono disponibili per gli screen reader. Questo significa che devi accettare misure aggiuntive per assicurarti che i tuoi dati siano disponibili.
Un'introduzione ai grafici CSS e SVG
I diagrammi CSS e SVG sono intrinsecamente più accessibili e semantici rispetto ad altre tecnologie. Ma possono essere complessi e forse più dispendiosi in termini di tempo se li codifichi a mano.
CSS Ninja Lea Verou offre diverse opzioni per creare grafici a torta da zero nel suo articolo "Progettazione di grafici a torta flessibili e sostenibili con CSS e SVG". I suoi metodi possono essere applicati anche ai grafici a ciambella.
Robin Randle ha anche scritto sulla creazione di grafici esclusivamente con CSS, dove sottolinea anche i suoi fallimenti nell'approccio.
Inspiegabile
Ho cercato su Google su SVG e grafici a ciambella e mi sono imbattuto in articoli di Lea Verou e Robin Randle (menzionati sopra) oltre a molti altri. Quasi tutti hanno discusso dell'uso degli attributi stroke-dasharray e stroke-dashoffset in SVG per posizionare parti di un diagramma. Queste proprietà sono identiche a "tratto" durante la creazione di vettori in programmi come Adobe Illustrator.
Alcuni di questi articoli hanno persino discusso dell'animazione in SVG, il che è interessante, ma non è nemmeno quello che stavo cercando.
Dopo la mia ricerca, sono stato in grado di capire che usando da SVG insieme a stroke e stroke-dasharray potrebbe fornirmi i segmenti di torta nidificati di cui avevo bisogno. Mi sono anche reso conto che l'offset trattino-tratti mi avrebbe permesso di "animare", o in altre parole, posizionare il segmento dove volevo che fosse nel cerchio.
Tuttavia, non mi è sembrato di trovare alcuna spiegazione chiara di come funzionassero esattamente gli attributi del trattino e di come si relazionassero alla circonferenza del cerchio. E ciò che era più irraggiungibile era attaccare diversi elementi (uno dopo l'altro) attorno al cerchio. Meglio ancora, qual è la formula per ottenere queste posizioni relative utilizzando le dimensioni del segmento univoche/dinamiche e gli attributi del tratto di SVG?
Così, sono diventato determinato a scoprirlo da solo.
Nota: se trovi risorse che spiegano questi concetti, condividile.
Come creare un diagramma SVG fai da te
Spiegazione di stroke-dashray e stroke-dashoffset
Iniziamo con un semplice grafico a "ciambella" SVG.
Noterai un paio di cose:
Il raggio (attributo "r") sembra assurdo! Come mai? Volevo rendere le dimensioni dei miei segmenti logiche, comprensibili e leggibili. Per raggiungere questo obiettivo, ho deciso di basare tutto sul 100% (o un cerchio di 100). Le forme SVG sono scalabili, quindi non importa quanto siano grandi; almeno la matematica sarà semplice qui. Spostandoci ulteriormente nell'area che ricordo dalla matematica del liceo: so che il raggio di un cerchio è r = C / (2π) o r = 100 / (2π). Il risultato è 15.91549430918952. Un numero pazzesco con un mucchio di numeri, sì, lo so, ma poi renderà la vita più facile a tutti noi.
Per viewBox i valori sono "0 0 42 42". Devono essere il doppio dei valori di cx e cy (centro x e centro y) ed essere leggermente più grande del diametro dei cerchi (compresa la larghezza del contorno).
C'è con la classe "ciambella". Questo è ciò che è garantito per rendere bianco il centro. Se questo non è importante per te (nel caso di un semplice Grafico a torta), allora questo elemento può essere rimosso.
Inoltre c'è con la classe "ciambella". Serve come sfondo grigio chiaro nel caso in cui i settori non riempiano il 100% del cerchio.
Quindi, dobbiamo regolare la dimensione del settore alla percentuale desiderata. Usiamo l'85%:
I settori vengono creati utilizzando un attributo del tratto SVG chiamato stroke-dasharray. Il valore che abbiamo impostato nell'esempio sopra è "85 15".
Se pensiamo al diagramma come circolare, quindi dalla presenza di un settore dell'85%, possiamo giudicare il resto del 15%. Questi due valori sono un array delimitato da spazi. Ecco cosa succede: viene creata una barra di 85, poi una barra di 15, poi una barra di 85, una barra di 15, e così via. Ma poiché stiamo usando un cerchio e il totale è 100, tutto si ripete di nuovo. Se non abbiamo creato il secondo valore nell'array in modo che integri il primo numero a cento, otterremo il terzo tratto (o parte) o più. Ad esempio, ecco un tratto-dasharray da "10 10":
Quindi, nella forma 2 e nella forma 3, puoi notare che il tratto-dasharray non inizia in cima (alle 12:00). Invece, in realtà inizia con lato destro(3:00) e si sposta in senso orario in un cerchio.
Se vogliamo posizionarci (o iniziare) in alto, allora dobbiamo usare stroke-dashoffset. Tuttavia, a differenza di stroke-dashray, stroke-dashoffset si muove in senso antiorario. Quindi, dovremo impostare il valore su "25" (25% nell'altra direzione dalle 3:00, di nuovo alle 12:00). Ricorda che questo non è un numero negativo perché l'offset si sta muovendo contro la freccia.
Come disporre le fette di ciambella intorno a SVG
Ora dobbiamo aggiungere ulteriori settori attorno al cerchio. Usiamo un settore che è il 15% del cerchio. La percentuale rimanente per i colpi-dasharray sarà dell'85%, indipendentemente da eventuali altri settori. Quindi, il codice sarà simile a questo:
Abbiamo lasciato l'offset tratto-trattino a 25, quindi il settore verde inizia in alto e va in senso orario, sovrapponendosi al primo settore (rosa).
Ovviamente, questo non è esattamente quello che volevamo. Vogliamo che il quindicesimo percento (verde) si adatti allo spazio lasciato dall'ottantacinquesimo percento (rosa). Possiamo regolare l'offset corsa-trattino finché non siamo fortunati, ma non sarebbe così facile se avessimo due settori in più. Invece, abbiamo bisogno di una formula:
Cerchio - lunghezza totale di tutti i settori precedenti + offset del primo settore = offset del settore attuale
Inserendo i nostri numeri, otteniamo:
Aggiungi più fette al nostro diagramma!
Questa stessa formula funziona per l'aggiunta di ulteriori settori. Riempiamo il grafico con il 40, 30, 20 percento e il restante 10 non verrà utilizzato.
Risultato:
Aggiunta di testo all'interno del grafico
Non sarebbe un grafico a ciambella senza testo in entrata e in uscita; è a questo che serve il buco, giusto? Bene, aggiungere del testo è facile. Usiamo solo l'elemento che è nativo delle forme SVG.
Noterai che ho diviso il testo del grafico in 2 elementi e li ho raggruppati ( ). Questo è stato fatto in modo da poter sovrapporre più facilmente il titolo e il numero uno sopra l'altro e anche disporli come un'unica unità. Ho regolato gli attributi X e Y per iniziare dal centro della forma sulla linea di base e allinearli a sinistra.
Come puoi vedere, il posizionamento non è del tutto corretto, quindi dobbiamo decorarlo con un po' di CSS:
Per prima cosa, aggiungiamo il carattere Montserrat (solo perché mi piace). Quindi dobbiamo regolare la dimensione del carattere e l'altezza della linea. Dopo aver aggiunto "translateY" in 0.25em, il testo è un po' allineato verticalmente, ma non abbiamo ancora finito.
Dobbiamo rendere entrambe le caselle di testo più piccole e allineate al centro regolando la dimensione del carattere dove vogliamo (0.6em per il numero più grande e 0.2em per il titolo sembra a posto) e usando la proprietà "text-anchor" con il valore " middle ".
Il testo è ora centrato. Tutto ciò che resta da fare è renderlo tutto maiuscolo (è facile) e organizzare i suoi singoli elementi usando "translateY" in modo che si pieghino correttamente. E questo è quello che abbiamo ora:
Problemi di accessibilità
Come accennato in precedenza, il contenuto SVG fa parte del DOM, quindi è intrinsecamente più accessibile. Ciò rende incredibilmente facile fornire un contesto aggiuntivo per gli screen reader attraverso attributi ed elementi come le intestazioni.
Il primo livello di problemi di accessibilità è rendere il diagramma SVG più semantico avvolgendolo in un elemento (dato che questo è un diagramma). Come forma, possiamo usare l'elemento per fornire un titolo o una descrizione per il grafico a ciambella.
Inoltre, possiamo aggiungere tag di contenuto
e <desc>(che sono nativi di SVG) e associarli alle intestazioni ARIA, agli ID e al ruolo di "fornire più contesto per gli screen reader".</p><p>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400);
body {
font: 16px/1.4em "Montserrat", Arial, sans-serif;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chart-text {
/*font: 16px/1.4em "Montserrat", Arial, sans-serif;*/
fill: #000;
-moz-transform: translateY(0.25em);
-ms-transform: translateY(0.25em);
-webkit-transform: translateY(0.25em);
transform: translateY(0.25em);
}
.chart-number {
font-size: 0.6em;
line-height: 1;
text-anchor: middle;
-moz-transform: translateY(-0.25em);
-ms-transform: translateY(-0.25em);
-webkit-transform: translateY(-0.25em);
transform: translateY(-0.25em);
}
.chart-label {
font-size: 0.2em;
text-transform: uppercase;
text-anchor: middle;
-moz-transform: translateY(0.7em);
-ms-transform: translateY(0.7em);
-webkit-transform: translateY(0.7em);
transform: translateY(0.7em);
}
figure {
display: flex;
justify-content: space-around;
flex-direction: column;
margin-left: -15px;
margin-right: -15px;
}
@media (min-width: 768px) {
figure {
flex-direction: row;
}
}
.figure-content,
.figure-key {
flex: 1;
padding-left: 15px;
padding-right: 15px;
align-self: center;
}
.figure-content svg {
height: auto;
}
.figure-key {
min-width: calc(8 / 12);
}
.figure-key {
margin-right: 6px;
}
.figure-key-list {
margin: 0;
padding: 0;
list-style: none;
}
.figure-key-list li {
margin: 0 0 8px;
padding: 0;
}
.shape-circle {
display: inline-block;
vertical-align: middle;
width: 32px;
height: 32px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.shape-fuschia {
background-color: #ce4b99;
}
.shape-lemon-lime {
background-color: #b1c94e;
}
.shape-blue {
background-color: #377bbc;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
</style>
<figure>
<div class="figure-content">
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut" aria-labelledby="beers-title beers-desc" role="img">
<title id="beers-title">Birre nella mia cantinaQuadrupli belgiSegmento rosa del grafico che copre il 40% del totale, ovvero 4 quadrupli belgi su 10 totali.Imperial India Pale AleSegmento grafico verde che copre il 20% del totale, ovvero 2 Imperial India Pale Ales su 10 totali.Stout imperiali russeSegmento del grafico blu che copre il 3% del totale, ovvero 3 Russian Imperial Stout su 10 in totale.
10
Birre
Grafico a ciambella che mostra 10 birre totali. Due birre sono Imperial India Pale Ales, quattro birre sono Quadrupel belghe e tre sono Russian Imperial Stouts. L'ultima birra rimasta non è etichettata.
Quadrupli belgi (4)
Pale Ale Imperiali dell'India (2)
Stout Imperiali Russe (3)
Possiamo anche aggiungere la chiave della legenda per il grafico come parte , annotandolo con il ruolo "view" e l'attributo aria-hidden, poiché è davvero necessario per chiarezza.
Con un pizzico di magia Flexbox CSS possiamo posizionare la chiave a destra e allinearla verticalmente con il diagramma. Cosa ci darà il prodotto finale:
Dal momento che il design CSS con la chiave a cui si applica proprietà del raggio di confine e Flexbox potrebbero essere articoli separati (il secondo richiede una spiegazione molto più lunga), lascerò questi argomenti per dopo.
Risultati finali
Come ho detto prima, scrivere a mano il codice per gli oggetti SVG può richiedere molto tempo, specialmente se si considera il fatto che ci sono molte eccellenti librerie JavaScript che creeranno questi oggetti per te. Ma potrebbero esserci casi (come la mia situazione) in cui tu o il tuo team avete bisogno di un metodo che non tocchi JavaScript, uno che verrà compilato sul lato server.
La buona notizia è che una volta che ci hai preso la mano in un modo simile, può essere applicato da te in qualsiasi altro luogo con costo minimo sforzo. Inoltre, sporcarsi le mani con gli oggetti SVG è buon modo scopri di più su come funzionano e scopri i vantaggi del loro utilizzo.
I miei risultati:
Applicare la matematica a qualcosa del genere è molto più divertente di quanto non fosse al liceo.
Col senno di poi, capisco che la logica dietro tratto-dasharray e tratto-dashoffset non è così complessa come pensavo inizialmente.
Non dimenticare di aggiungere qui livelli aggiuntivi disponibilità. Dopotutto, l'accessibilità non è solo per il bene degli screen reader. È anche necessario per rendere i tuoi contenuti più accessibili e fruibili da tutte le persone e tutti i dispositivi (incluso motori di ricerca). Se la tua libreria JavaScript non ha funzioni di accessibilità, considera di cambiarla.
