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
Evitare il flickering dei componenti nel prerender di Blazor 8
Reactive form tipizzati con FormBuilder in Angular
Migrare una service connection a workload identity federation in Azure DevOps
Creazione di componenti personalizzati in React.js con Tailwind CSS
Evitare la command injection in un workflow di GitHub
Generare file PDF da Blazor WebAssembly con iText
Load test di ASP.NET Core con k6
Criptare la comunicazione con mTLS in Azure Container Apps
Miglioramenti nell'accessibilità con Angular CDK
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Usare il colore CSS per migliorare lo stile della pagina
Installare le Web App site extension tramite una pipeline di Azure DevOps