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
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Configurare policy CORS in Azure Container Apps
Usare il versioning con i controller di ASP.NET Core Web API
Utilizzare politiche di resiliency con Azure Container App
Sostituire la GitHub Action di login su private registry
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Cambiare la chiave di partizionamento di Azure Cosmos DB
Gestire undefined e partial nelle reactive forms di Angular
Definire stili a livello di libreria in Angular
Creare moduli CSS in React
I più letti di oggi
- I nuovi metodi degli array di ECMAScript 5
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions
- Un custom control BoundField con dropdownlist
- .NET Core 3, C#8 and beyond
- Utilizzare long polling in HTML5 per richieste in real time
- Utilizzare le shortcut da tastiera con KeyboardAccelerator nella Universal Windows Platform
- Microsoft Security Bulletin MS05-048