Per creare un grafico x-y in javascript, ci sono diverse librerie come D3.js, Chart.js, Highcharts, Google Charts, etc. In questo esempio utilizzerò la libreria Chart.js.
Assumiamo di avere un array di oggetti che rappresentano il peso e il timestamp in cui è stato preso il peso:
index.tsx192 chars7 lines
Per prima cosa, dobbiamo creare un canvas HTML in cui il grafico verrà disegnato:
31 chars2 lines
Poi, possiamo utilizzare la libreria Chart.js per creare un grafico:
index.tsx782 chars38 lines
In questo esempio, abbiamo utilizzato il tipo di grafico "line" e abbiamo definito l'array delle labels come la data formattata di ogni oggetto. Abbiamo poi definito l'array dei pesi e lo abbiamo associato all'asse y del grafico.
Infine, abbiamo definito le opzioni per le scale degli assi x e y, specificando che l'asse x utilizza il tipo "time" e il formato "MM/DD/YYYY".
Questo codice genererà un grafico simile al seguente:
gistlibby LogSnag