ChartJS - Disegno grafico con etichetta per mese, dati di giorno

Question

Vorrei disegnare un grafico a linee per Chartjs con dati di giorno, ma etichetta per mese.

Se l'etichetta viene visualizzata di giorno, ci sono molti punti. Pertanto, mi piacerebbe visualizzare l'etichetta per mese anziché per giorno. Per esempio:

Qualcuno mi potrebbe insegnare come fare?

Grazie.

Answer 1

L'array labels e l'array data devono corrispondere. Pertanto ciò che è necessario fare è calcolare i valori di essere tenere in array di dati per soddisfare le vostre etichette

data: { 
    labels: ["Jan", "Feb", "March", ...], 
    datasets: [{ 
     label: '# of Votes', 
     data: [01, 02, 03, ...], 
     backgroundColor: [ 
      'rgba(255, 99, 132, 0.2)', 
      'rgba(54, 162, 235, 0.2)', 
      ... 
     ], 
     borderColor: [ 
      'rgba(255,99,132,1)', 
      'rgba(54, 162, 235, 1)', 
      'rgba(255, 206, 86, 1)', 
      ... 
     ], 
     borderWidth: 1 
    }] 
}, 

Vuol risolvere i tuoi dubbi?

Answer 2

Questa domanda è piuttosto vecchia ora, ma ho trovato una soluzione alternativa utilizzando la funzionalità afterTickToLabelConversion. Ho formattato la data e lasciato solo un'etichetta per ogni mese (il resto delle etichette si trasforma in virgolette vuote).
Ecco il frammento di mettere in vostra opzione grafico:

scales: { 
     xAxes: [{ 
      type: 'time', 
      position: 'bottom', 
      time: { 
       displayFormats: { 
        'day': 'MM/YY' 
       }, 
       tooltipFormat: 'DD/MM/YY', 
       unit: 'day', 
      }, 
      // leave only one label per month 
      afterTickToLabelConversion: function (data) { 
       var xLabels = data.ticks; 
       var oldLabel = ""; 
       xLabels.forEach(function (labels, i) { 
        if(xLabels[i] == oldLabel){ 
         xLabels[i] = ""; 
        } else { 
         oldLabel = xLabels[i]; 
        } 
       }); 
      } 
     }] 
    } 

Answer 3

Basta config vostra xAxes-> proprietà time come:
Unità: 'mese'

xAxes: [{ 
 
    type: 'time', 
 
    position: 'bottom', 
 
    time: { 
 
    displayFormats: {'day': 'MM/YY'}, 
 
    tooltipFormat: 'DD/MM/YY', 
 
    unit: 'month', 
 
    } 
 
}],