crea un grafico x y che pone in relazione valori di tempo sull'asse x e valori di peso sull'asse y in javascript

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.tsx
const data = [
  { timestamp: 1626109300000, weight: 70 },
  { timestamp: 1626195700000, weight: 71 },
  { timestamp: 1626282100000, weight: 69 },
  { timestamp: 1626368500000, weight: 72 }
]
192 chars
7 lines

Per prima cosa, dobbiamo creare un canvas HTML in cui il grafico verrà disegnato:

<canvas id="myChart"></canvas>
31 chars
2 lines

Poi, possiamo utilizzare la libreria Chart.js per creare un grafico:

index.tsx
const labels = data.map(item => new Date(item.timestamp).toLocaleDateString())
const weights = data.map(item => item.weight)

const ctx = document.getElementById("myChart").getContext("2d")
const myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: labels,
    datasets: [{
      label: "Peso",
      data: weights,
      borderColor: "rgb(255, 99, 132)",
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: "time",
        time: {
          parser: "MM/DD/YYYY",
          tooltipFormat: "ll"
        },
        scaleLabel: {
          display: true,
          labelString: "Data"
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: "Peso (kg)"
        }
      }]
    }
  }
})
782 chars
38 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:

chart-js-xy-example

gistlibby LogSnag