Negli script #126 e #128 abbiamo visto come utilizzare la libreria Chart.js per generare grafici a torta e a barre utilizzando il controllo HTML Canvas e la libreria Chart.js. In questo script ci occupiamo di un'altra funzionalità offerta dalla libreria Chart.js: la creazione di grafici a linee che sono utili per indicare un trend. 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 messa a disposizione da Chart.js.
var ctx = document.getElementById("cvChart").getContext("2d"); var lineChart = new Chart(ctx);
Il terzo e ultimo passo consiste nel creare i dati per il grafico e passarli al metodo Line 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)", pointHighlightFill: "rgba(0, 0, 255, 0.75)", pointHighlightStroke: "rgba(0, 0, 255, 1)", data: [150, 80, 90] } ] }; var line = lineChart.Line(data, {});
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Eseguire le GitHub Actions offline
Eseguire una GroupBy per entity in Entity Framework
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Gestire undefined e partial nelle reactive forms di Angular
Paginare i risultati con QuickGrid in Blazor
Aggiungere interattività lato server in Blazor 8
Usare il versioning con i controller di ASP.NET Core Web API
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Configurare policy CORS in Azure Container Apps