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
Controllare gli accessi IP alle app con Azure Container Apps
Verificare la provenienza di un commit tramite le GitHub Actions
Creare un'applicazione React e configurare Tailwind CSS
Assegnare un valore di default a un parametro di una lambda in C#
Utilizzare i primary constructor in C#
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Creare gruppi di client per Event Grid MQTT
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Generare token per autenicarsi sulle API di GitHub
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Eseguire operazioni sui blob con Azure Storage Actions