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 l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Usare il versioning con i controller di ASP.NET Core Web API
Utilizzare la libreria Benchmark.NET per misurare le performance
Migrare un repository git da Azure DevOps a GitHub
Utilizzare la session affinity con Azure Container Apps
Controllare se un branch esiste nel remote con un workflow di GitHub
Personalizzare le richieste con i rule set di Azure Front Door
Sviluppo applicazioni x-plat con .NET MAUI
Cache policy su route groups di Minimal API in ASP.NET Core 7
Utilizzare le collection expression in C#
Utilizzare i nuovi piani dedicati di Azure Container Apps
Gestire tipi complessi in query string grazie a IParsable in ASP.NET Core 7.0
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5