web-dev-qa-db-fra.com

Comment formater les valeurs d'échelle de temps de l'axe des x dans Chart.js v2

Je suis capable de formater les info-bulles lorsque je survole un point de donnée sur un graphique en courbes via options.scales.xAxes.time.tooltipFormat, mais je ne parviens pas à le faire pour les libellés en croix de l'axe des abscisses. Mon data.labels est un tableau d'objets moment. Ils s’affichent sous la forme "MMM DD, YYYY" (le 23 février 2012, par exemple), mais je veux abandonner l’année.

chart.js
36
wetjosh

Réglez simplement la variable displayFormat de l'unité de temps sélectionnée sur 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',
        }
        ...

Notez que j'ai défini le format d'affichage de tous les appareils sur MMM DD. Une meilleure façon, si vous contrôlez la plage de vos données et la taille du graphique, serait de forcer une unité, comme ça

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

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

65
potatopeelings

selon la page de documentation de Chart js section de configuration de coche . vous pouvez formater la valeur de chaque tick en utilisant la fonction de rappel. Par exemple, je voulais changer les paramètres régionaux des dates affichées pour qu'ils soient toujours allemands. dans les parties ticks des options d'axe

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

Vous pouvez formater les dates avant de les ajouter à votre tableau. C'est comme ça que j'ai fait. J'ai utilisé AngularJS

// convertit la date en un format standard

var dt = new Date(date);

// ne prend que la date et le mois et les envoie à votre tableau d'étiquettes

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

Utilisez ce tableau dans votre présentation graphique

0
shafeerambatt