Chart.js Grafico a linee con diverse etichette per ogni set di dati

Question

Utilizzando Chart.js è possibile creare grafici a linee e per questo è necessario disporre di etichette e set di dati. per esempio:

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fill: false, 
      lineTension: 0.1, 
      backgroundColor: "rgba(75,192,192,0.4)", 
      borderColor: "rgba(75,192,192,1)", 
      borderCapStyle: 'butt', 
      borderDash: [], 
      borderDashOffset: 0.0, 
      borderJoinStyle: 'miter', 
      pointBorderColor: "rgba(75,192,192,1)", 
      pointBackgroundColor: "#fff", 
      pointBorderWidth: 1, 
      pointHoverRadius: 5, 
      pointHoverBackgroundColor: "rgba(75,192,192,1)", 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
      pointHoverBorderWidth: 2, 
      pointRadius: 1, 
      pointHitRadius: 10, 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 

Il problema qui è che si dispone di una quantità fissa di etichette (7 in questo caso) e devi anche fornire 7 voci di dati per ogni set di dati. Ora cosa succede se hai una quantità sconosciuta di etichette e voci di dati?

Che cosa succede se una voce di dati contiene un numero e un tempo:

Entry { 
    number: 127 
    time: 10:00 
} 

Che cosa succede se si desidera visualizzare tutti i tempi sul X-asse e tutti i numeri sulla asse Y in ordine di tempo sulla X-Axis. È possibile con Chart.js?

Answer 1

Dal momento che ci sono un certo numero di domande nel tuo post, cercherò di dare una mano con almeno alcune di esse. Nel caso del tuo modello Entry con un numero e una volta dovresti creare un grafico sparsi. Qui definisci gli oggetti dati con valori xey come mostrato nel mio esempio qui sotto. Richiede che ogni voce x abbia una y corrispondente. Dai un'occhiata al grafico a dispersione. http://www.chartjs.org/docs/#line-chart-scatter-line-charts

var d = new Date(); 
var scatterChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     datasets: [{ 
      label: 'Scatter Dataset', 
      data: [{ 
       x: new Date().setDate(d.getDate()-5), 
       y: 0 
      }, { 
       x: new Date(), 
       y: 10 
      }, { 
       x: new Date().setDate(d.getDate()5), 
       y: 5 
      }] 
     }] 
    }, 
    options: { 
     scales: { 
      xAxes: [{ 
        type: "time", 
        time: { 
         format: "HH:mm", 
         unit: 'hour', 
         unitStepSize: 2, 
         displayFormats: { 
          'minute': 'HH:mm', 
          'hour': 'HH:mm' 
         }, 
         tooltipFormat: 'HH:mm' 
        }, 
        gridLines: { 
         display: false 
        } 
       }], 
     } 
    } 
}); 

Answer 2

ho avuto una battaglia con questo anche oggi. Devi essere un po 'più specifico con il set di dati. In un grafico a linee "set di dati" è un array con ogni elemento della matrice che rappresenta una linea sul grafico. Chart.js è davvero molto flessibile qui una volta che lo hai risolto. È possibile associare una linea (un insieme di set di dati) a un asse x e/oa un asse y, ciascuno dei quali è possibile specificare in dettaglio.

Nel tuo caso se restiamo con una sola riga sul grafico e vuoi che la parte "tempo" della voce sia lungo il fondo (l'asse x) allora tutti i tuoi tempi potrebbero andare nelle "etichette" array e il tuo "numero" sarebbe puntato sull'asse y. Per farla semplice, senza specificare le nostre bilance con assi x e y e dato questi dati:

var MyData = [{time:"10:00", number: "127"}, 
       {time:"11:00", number: "140"}, 
       {time:"12:00", number: "135"}, 
       {time:"13:00", number: "122"}]; 

è possibile impostare i "dati" di proprietà del grafico ad essere:

var data = { 
    labels: ["10:00", "11:00", "12:00", "13:00"], 
    datasets: [ 
     { 
      label: "My First dataset", 

      // Insert styling, colors etc here 

      data: [{x: "10:00", y: 127}, 
        {x: "11:00", y: 140}, 
        {x: "12:00", y: 135}, 
        {x: "13:00", y: 122}] 
     } 
    ]}; 

Si noti che l'array di dati è ora un po 'più specifico con ogni elemento di dati che si traccia sull'asse x facendo riferimento a una delle etichette anziché essere semplicemente un numero grezzo. Ora puoi mettere un altro oggetto dataset nell'array dei dataset seguendo questo modello e avere due linee, ovviamente dai diversi colori e nomi alle tue linee ("etichetta").

Spero che questo aiuti.