TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Widget grafico a torta di avanzamento animato per Weebly

60

Le barre di avanzamento vengono utilizzate per mostrare le competenze e altri dati in una visualizzazione grafica in modo che gli utenti possano comprendere rapidamente i dati. Nel nostro articolo precedente avevamo visto come creare barre di avanzamento orizzontali e in questo tutorial vediamo come creare widget di grafici a torta di avanzamento animati per il sito Weebly. Tra le molte opzioni disponibili, il semplice plug-in per grafici a torta è uno dei modi più semplici per creare grafici di avanzamento a torta. Il widget avrà un aspetto simile a quello riportato di seguito e potrai personalizzare i colori e il contenuto secondo le tue necessità.

Widget grafico a torta di avanzamento animato per Weebly

Scarica i file sorgente per creare questo widget sul tuo sito.

Il widget viene creato modificando il plug-in gratuito jQuery per grafici a torta e aggiungendovi script e CSS personalizzati. Ha le seguenti caratteristiche:

  • Completamente reattivo su tutti i dispositivi.
  • Specificare qualsiasi percentuale per l’avanzamento, se non si desidera che il simbolo % lo rimuova dal file di script.
  • Personalizza i colori del cerchio, l’animazione del progresso e le punte.
  • Posiziona il grafico in qualsiasi luogo, il widget si animerà durante lo scorrimento.

Scarica i file sorgente e segui le istruzioni passo passo di seguito per aggiungere il widget al tuo sito Weebly. Il download zip contiene i seguenti file:

  • jquery.min.js: questo è un file jQuery richiesto solo per il funzionamento della demo. Poiché Weebly utilizza la libreria jQuery per impostazione predefinita, questo file non è richiesto sul tuo sito Weebly.
  • jquery.easypiechart.min.js: questo è il file di script di base e anche lo script personalizzato viene aggiunto all’interno di questo file per renderlo un’unica fonte.
  • Progress Pie Chart.html – questa è una pagina HTML demo che contiene il CSS e il codice HTML.

Aggiunta del widget in Weebly

Per prima cosa carica il file jquery.easypiechart.min.js sul tuo sito Weebly in "Tema > Modifica HTML / CSS > Risorse". Collega lo script alla pagina richiesta in "Pagine > Seleziona la pagina > Avanzate > Codice intestazione " aggiungendo il sotto il codice:

<script src="files/theme/jquery.easypiechart.min.js"></script>

Il CSS contiene tre componenti principali: contenitore, singoli blocchi a torta e il grafico controllato rispettivamente tramite le classi .chart-container, .pr-chart-ctrl e .pr-chart.

Aggiungi il seguente CSS (disponibile con Progress Pie Chart.html) nella sezione "Pagine > Seleziona la pagina > Impostazioni SEO > Codice piè di pagina".

<style> .chart-container .pr-chart-ctrl { display:block; float:left; width:25%; } .chart-container .pr-chart-ctrl .pr-chart { display:block; position:relative; width:100%; margin:0 0 20px 0; text-align:center; margin-top: 30px; } .chart-container .pr-chart-ctrl .pr-chart canvas { display:block; margin:0 auto; padding:0; vertical-align:center; } .chart-container .pr-chart-ctrl .pr-chart i { position:absolute; top:0; left:0; width:100%; height:200px; line-height:200px; font-size:48px; font-style:normal; color: #808080; } .chart-container .pr-chart-ctrl p{ margin:0; padding:0; text-transform:uppercase; color:green; } @media screen and (max-width:500px) { .chart-container .pr-chart-ctrl { width:100%; margin-bottom:50px; } } @media screen and (min-width:501px) and (max-width:900px) { .chart-container .pr-chart-ctrl { width:50%; margin-bottom:50px; } } </style>

La parte finale consiste nell’aggiungere il codice HTML sottostante all’interno di un elemento " Embed Code ". Puoi sostituire le percentuali fittizie e i titoli con i tuoi.

<ul class="chart-container"> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="25"><i></i></div> <p>WordPress Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="50"><i></i></div> <p>Weebly Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="75"><i></i></div> <p>Search Engine Optimization</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="100"><i></i></div> <p>Blog Consulting</p> </li> </ul>

Personalizzazione del widget

Il file jquery.easypiechart.min.js contiene lo script seguente per controllare il comportamento dell’animazione di avanzamento della torta.

size: 200, barColor: '#F85656', trackColor: '#f1f1f1', scaleColor: 'violet', scaleLength: 5, lineWidth: 5, lineCap: 'square', onStep: function(from, to, percent) { $(this.el).find('i').text(Math.round(percent) + '%');

È possibile rimuovere la % per eliminarla dalla visualizzazione del grafico e il controllo delle variabili rimanenti è il seguente:

Variabile

Controllo

dimensione Definire la dimensione del cerchio del grafico a torta.
barColore Colore dell’animazione di avanzamento.
tracciaColore Colore del cerchio della torta.
scalaColore Colore delle punte.
scalaLunghezza Lunghezza delle punte.
larghezza della linea Larghezza del cerchio del grafico a torta di avanzamento.
lineCap Fine dell’animazione di avanzamento, i valori possibili sono rotondo, quadrato e testa a testa.

Grafico a torta di parallasse a larghezza intera

L’aggiunta del widget sopra utilizzando l’elemento del codice di incorporamento lo renderà semplice. Puoi creare un bellissimo grafico a torta di parallasse utilizzando l’ elemento di sezione come di seguito:

Widget grafico a torta di avanzamento animato per Weebly

Grafico a torta Weebly Parallax

Segui le istruzioni seguenti per creare un grafico a torta con lo sfondo dell’immagine parallasse.

  • Trascina e rilascia un elemento della sezione. Fare clic sull’elemento della sezione nell’area del contenuto e quindi fare clic sull’opzione "Modifica sfondo".
  • Scegli l’immagine come sfondo e imposta l’effetto di scorrimento come parallasse. Puoi anche impostare il colore di sfondo e lo sfondo del video è disponibile solo per gli utenti professionisti.
  • Ora trascina e rilascia un elemento del codice di incorporamento e aggiungi il codice HTML come fornito nella sezione precedente.
  • Pubblica il tuo sito e guarda il grafico a torta animato con lo sfondo dell’immagine parallasse.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More