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
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Eseguire attività basate su eventi con Azure Container Jobs
Utilizzare il trigger SQL con le Azure Function
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Utilizzare la libreria Benchmark.NET per misurare le performance
Usare le collection expression per inizializzare una lista di oggetti in C#
Controllare gli accessi IP alle app con Azure Container Apps
Assegnare un valore di default a un parametro di una lambda in C#
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Creare form tipizzati con Angular