CSS3 Tricks: Grafico a torta con la funzione conic-gradient()

Ci sono tre tipi di funzioni CSS gradient: linear-gradient(), radial-gradient() e, appunto conic-gradient() che vogliamo esaminare oggi per un suo particolare tipo di utilizzo, quello di poter costruire un semplice, quanto immediato grafico a torta.

Queste funzioni restituiscono un oggetto di tipo <gradient>, uno dei tipi in cui può essere rappresentato il data type <image>.

La funzione CSS conic-gradient() crea un'immagine costituita da un gradiente con transizioni di colore ruotate attorno a un punto centrale. Un gradiente conico viene specificato indicando l'angolo di rotazione, il centro del gradiente e quindi specificando l'ampiezza dell'angolo o dell'arco. Le unità di misura con cui si può esprimere l'ampiezza dell'angolo di un singolo colore includono 'deg' per gradi, 'grad' per gradienti, 'rad' per radianti e 'turn' per giri. In un cerchio ci sono 360 gradi, 400 gradienti, 2π radianti e 1 giro.



Per il nostro scopo dovremo indicare il colore da impiegare seguito da uno o due valori indicanti il numero di gradi da cui il colore inizia e i gradi di estensione dell'angolo. Tutto sarà immediatamente chiaro nell'esempio.

Vediamo cosa indicare ne corpo della pagina HTML e separatamente nel nostro file CSS.

HTML

        <h2>Pie Chart con solo CSS</h2>
        <div class="pie_chart">
        </div>

 

Nulla di più banale

css

        .pie_chart {
            background: conic-gradient(red 6deg, orange 6deg 18deg, yellow 18deg 45deg, green 45deg 110deg, blue 110deg 200deg, purple 200deg);
            border-radius:50%;
            width:220px;
            height:220px;
            padding:20px;
            border:1px solid black;
            box-shadow:0 3px 1px 2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
        }

 

Il risultato sarà il seguente:

Pie Chart con solo CSS


Nel nostro CSS l'unica cosa da spiegare è l'uso della funzione conic-gradient() che imposterà il background del nostro box.

Abbiamo iniziato col colore rosso per un angolo di 6 gradi. L'inizio è impostato a 0°. Quindi il secondo parametro dice di proseguire con l'arancione partendo da 6° e proseguendo fino ad un ampiezza d'angolo di 18° ecc.

e questo è tutto ciò che serve.

Naturalmente salta agli occhi che i valori di ampiezza per i singoli colori in questo modo sono predefiniti nella funzione nel nostro CSS. Questo male si sposa con la necessità di esporre grafici a torta che evidentemente dovranno accettare valori differenti a seconda delle situazioni. Per fare questo scriviamo qualche riga di javascript.

Normalmente i valori del grafico verranno letti da un database con un linguaggio server-side tipo PHP oppure inseriti a mezzo di un form ecc. Noi qui ipotizziamo di aver già ottenuto i valori che ci interessano e che esponiamo ad esempio in una tabella, come segue:

            <table align="left" border="1" cellspacing="0" cellpadding="0">
                <tr class="heading">
                    <th>Colore</th>
                    <th>%</th>
                </tr>
                <tr><td id="_c1">red</td><td id="_gr1">6</td></tr>
                <tr><td id="_c2">orange</td><td id="_gr2">18</td></tr>
                <tr><td id="_c3">yellow</td><td id="_gr3">45</td></tr>
                <tr><td id="_c4">green</td><td id="_gr4">110</td></tr>
                <tr><td id="_c5">blue</td><td id="_gr5">200</td></tr>
                <tr><td id="_c6">purple</td><td id="_gr6">360</td></tr>
            </table>

A ciascuna cella della tabella abbiamo attribuito un id per poterne leggere il contenuto con la routine javascript

Nel nostro CSS abbiamo rimosso la riga che definisce la funzione conic-gradient(). Quindi la classe pie_chart sarà adesso:

        .pie_chart {
            display:none;
            border-radius:50%;
            width:220px;
            height:220px;
            padding:20px;
            border:1px solid black;
            box-shadow:0 3px 1px 2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
        }

 

e nel <body> della pagina la <div> del nostro grafico sarà inalterata salvo l'aggiunta di un id. Aggiungiamo un bottone per attivare la routine javascript che nel vostro programma potrà essere attivata da qualsivoglia evento (anche onload, se credete.

        <div>
            <button> onclick="SetGradientValues()">Scrivi grafico</button>
        </div>
        <div id="_pc" class="pie_chart clearfix margbot30">
        </div>

 

A questo punto manca solo lo script javascript che riportiamo di seguito:

    <script>
        function SetGradientValues() {
            const col = [];
            const gr     = [];
            for (var i = 1; i <7; i++) {
                col[i] = document.getElementById("_c"+i).innerHTML+" ";
                gr[i] = document.getElementById("_gr"+i).innerHTML;
            }
            var pie = document.getElementById("_pc");
            var back = "conic-gradient("+col[1]+gr[1]+"deg, ";
            for (var i = 2; i <6; i++) {
                back+=col[i]+gr[i-1]+"deg "+gr[i]+"deg, ";
            }
            back+=col[6]+gr[5]+"deg);";
            pie.style.display = "block";
            pie.style.cssText+="background:"+back+'"';
        }
    </script>

 

Lo script acquisisce tutti i valori dalla tabella e imposta una stringa "background: conic-gradient(... ecc." che poi aggiungerà allo style della nostra div, che così mostrerà la torta.

La pagina html completa e funzionante la potete scaricare da qui.

 

Commenti

(Occorre fare login per commentare - Se non sei registrato puoi farlo cliccando su "accedi")