Nello script #126 abbiamo visto come utilizzare la libreria Chart.js per generare grafici a torta utilizzando il controllo HTML Canvas. In questo script ci occupiamo di un'altra funzionalità offerta dalla libreria Chart.js: la creazione di grafici a barre. Il primo passo consiste sempre nella dichiararazione, nel codice HTML, del canvas specificandone le dimensioni.
<canvas id="cvChart" width="400" height="400"></canvas>
Il secondo passo consiste nel 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 Bar della classe Chart. Oltre ai dati va passato un secondo oggetto che contiene delle proprietà per personalizzare il grafico.
var data = { labels: ["Venerdì", "Sabato", "Domenica"], datasets: [ { label: "data", fillColor: "rgba(0, 0, 255, 0.5)", strokeColor: "rgba(0, 0, 255, 0.8)", highlightFill: "rgba(0, 0, 255, 0.75)", highlightStroke: "rgba(0, 0, 255, 1)", data: [150, 80, 90] } ] }; var bar = pieChart.Bar(data, {});
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Utilizzare Tailwind CSS all'interno di React: primi componenti
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare database e servizi con gli add-on di Container App
Eseguire query verso tipi non mappati in Entity Framework Core
Effettuare il refresh dei dati di una QuickGrid di Blazor
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Miglioramenti nell'accessibilità con Angular CDK
Eseguire attività basate su eventi con Azure Container Jobs
Limitare le richieste lato server con l'interactive routing di Blazor 8
Eseguire i worklow di GitHub su runner potenziati
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core