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

Question

Je suis capable de formater les infobulles lorsque je survole un point de données sur un graphique linéaire via options.scales.xAxes.time.tooltipFormat mais je n'arrive pas à le faire pour les étiquettes des tics de l'axe x. Mon site data.labels est un tableau d'objets momentanés. Ils s'affichent comme "MMM DD, YYYY" (par exemple, 23 février 2012), mais je veux laisser tomber l'année.

Answer 1

Il suffit de définir tous les paramètres de l'unité de temps sélectionnée displayFormat à 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',
        }
        ...

Remarquez que j'ai réglé tous les formats d'affichage de l'unité sur MMM DD . Une meilleure méthode, si vous avez le contrôle de la plage de vos données et de la taille du graphique, serait de forcer une unité, comme suit

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

---

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

Answer 2

selon la page de documentation Chart js section de configuration des coches . vous pouvez formater la valeur de chaque tick en utilisant la fonction de rappel. par exemple, je voulais changer la locale des dates affichées pour qu'elles soient toujours en allemand. dans les parties ticks des options d'axe

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

Answer 3

J'ai un cas d'utilisation différent, je veux différents formats basés sur la durée entre le début et la fin des données dans le graphique. J'ai trouvé l'approche la plus simple

    xAxes = {
        type: "time",
        time: {
            displayFormats: {
                hour: "hA"
            }
        },
        display: true,
        ticks: {
            reverse: true
        },
        gridLines: {display: false}
    }
    // if more than two days between start and end of data,  set format to show date,  not hrs
    if ((parseInt(Cookies.get("epoch_max")) - parseInt(Cookies.get("epoch_min"))) > (1000*60*60*24*2)) {
        xAxes.time.displayFormats.hour = "MMM D";
    }

Answer 4

Vous pourriez formater les dates avant de les ajouter à votre tableau. C'est ce que j'ai fait. J'ai utilisé AngularJS

//convertir la date dans un format standard

var dt = new Date(date);

//prendre seulement la date et le mois et les pousser dans votre tableau d'étiquettes

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

Utilisez ce tableau dans votre présentation graphique