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
Cambiare la chiave di partizionamento di Azure Cosmos DB
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Creazione di componenti personalizzati in React.js con Tailwind CSS
Semplificare il deployment di siti statici con Azure Static Web App
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Eseguire una GroupBy per entity in Entity Framework
Disabilitare automaticamente un workflow di GitHub (parte 2)
Usare una container image come runner di GitHub Actions
Implementare l'infinite scroll con QuickGrid in Blazor Server