Una funzionalità comune a molti siti web è la necessità di creare grafici per mostrare statistiche. Tuttavia HTML non prevede specifiche per la generazione di grafici, quindi per raggiungere questo scopo dobbiamo utilizzare librerie di terze parti. Una di queste librerie è Chart.js che, usata in combinazione con un canvas, permette di generare grafici molto semplicemente. In questo script ci occupiamo di generare un grafico a torta.
Una volta scaricato e importato il file JavaScript di chart.js, il primo passo consiste nel dichiarare nel codice HTML un canvas specificandone le dimensioni.
<canvas id="cvChart" width="400" height="400"></canvas>
A questo punto, nel codice JavaScript dobbiamo recuperare l'istanza del contesto 2d del canvas e passarlo in input al costruttore della classe Chart.
var ctx = document.getElementById("cvChart").getContext("2d"); var pieChart = new Chart(ctx);
Il terzo e ultimo passo consiste nel creare i dati per il grafico e passarli al metodo Pie della classe Chart. Oltre ai dati va passato un secondo oggetto che contiene delle proprietà per personalizzare il grafico. Questo oggetto può anche essere vuoto, ma non può essere null.
var data = [ { value: 70, color:"#FF0000", label: "Red" }, { value: 30, color: "#00FF00", label: "Green" }, ]; var pie = pieChart.Pie(data, {});
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Model as a Service su Microsoft Azure
Utilizzare Tailwind CSS all'interno di React: primi componenti
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Sostituire la GitHub Action di login su private registry
Supportare il sorting di dati tabellari in Blazor con QuickGrid
C# 12: Cosa c'è di nuovo e interessante
Ottimizzazione dei block template in Angular 17
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Utilizzare un service principal per accedere a Azure Container Registry