Come formattare i valori della scala temporale dell'asse in Chart.js v2

Question

Sono in grado di formattare le descrizioni dei comandi quando passo il mouse su un punto dati su un grafico a linee tramite options.scales.xAxes.time.tooltipFormat, ma non riesco a farlo per la x- Asse tick tick. Il mio data.labels è una matrice di oggetti momento. Vengono visualizzati come "MMM DD, YYYY" (ad esempio il 23 febbraio 2012), ma desidero chiudere l'anno.

Answer 1

Basta impostare tutti displayFormat a MMM DD

options: { 
    scales: { 
    xAxes: [{ 
     type: 'time', 
     time: { 
     displayFormats: { 
      'millisecond': 'MMM DD', 
      'second': 'MMM DD', 
      'minute': 'MMM DD', 
      'hour': 'MMM DD', 
      'day': 'MMM DD', 
      'week': 'MMM DD', 
      'month': 'MMM DD', 
      'quarter': 'MMM DD', 
      'year': 'MMM DD', 
     } 
     ... 

comunicazione della unità di tempo selezionato che ho impostato tutti i formati display dell'unità per MMM DD. Un modo migliore, se si ha il controllo su tutta la gamma dei suoi dati e le dimensioni del grafico, sarebbe forzare un'unità, in questo modo

options: { 
    scales: { 
    xAxes: [{ 
     type: 'time', 
     time: { 
     unit: 'day', 
     unitStepSize: 1, 
     displayFormats: { 
      'day': 'MMM DD' 
     } 
     ... 

---

Fiddle - http://jsfiddle.net/prfd1m8q/

Answer 2

come da documentazione Grafico js pagina tick configuration section. puoi formattare il valore di ogni tick usando la funzione di callback. per esempio volevo cambiare la localizzazione delle date visualizzate per essere sempre tedesco. nella spunta parti delle opzioni dell'asse

ticks: { 
    callback: function(value) { 
     return new Date(value).toLocaleDateString('de-DE', {month:'short', year:'numeric'}); 
    }, 
}, 

Answer 3

È possibile formattare le date prima di aggiungerle all'array. È così che ho fatto. Ho usato AngularJS

// convertire la data in un formato standard

var dt = new Date(date); 

// prendere solo la data e il mese e spingerli al vostro allineamento etichetta

$rootScope.charts.mainChart.labels.push(dt.getDate() + "-" + (dt.getMonth() + 1)); 

Utilizzare questo array nella tua presentazione del grafico