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

Je suis capable de formater les info-bulles lorsque j'ai passez la souris sur un point de données sur un graphique en ligne via options.scales.xAxes.time.tooltipFormat, mais je n'arrive pas à le faire pour l'axe des x tique etiquettes. Mon data.labels est un tableau de moment d'objets. Ils affichent comme "MMM DD, YYYY" (par exemple, le 23 Février, 2012), mais je veux chute de l'année.

InformationsquelleAutor wetjosh | 2016-05-05
  1. 72

    Vient de créer tous les temps sélectionné par l'unité de 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',
        }
        ...

    Avis que j'ai mis tout l'appareil du format d'affichage de MMM DD. Une meilleure façon, si vous avez le contrôle sur l'ensemble de vos données et la taille du graphique, serait la force d'une unité, comme

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

    Violon http://jsfiddle.net/prfd1m8q/

    • Je crois en votre deuxième extrait de code, le unit et unitStepSize doit être placé à l'intérieur de la time objet. mise à Jour de jsfiddle. J'ai essayé de faire un edit, mais il a été rejeté car il dévié de votre intention originale de la poste...
    • Merci @tchan! Corrigés.
    • Une idée de comment traduire date (mois) dans une autre langue autre que l'anglais?
    InformationsquelleAutor potatopeelings
  2. 17

    comme par le Tableau js page de documentation tique section de configuration. vous pouvez formater la valeur de chaque tique à l'aide de la fonction de rappel. par exemple, j'ai voulu changer les paramètres régionaux d'affichage des dates d'être toujours en allemand. dans le tiques parties de l'axe des options

    ticks: {
    callback: function(value) { 
        return new Date(value).toLocaleDateString('de-DE', {month:'short', year:'numeric'}); 
    },
},
    • Je pense qu'il y a un problème pour IE11 avec cette solution, il affiche toutes les dates comme "Date Invalide", où, de Chrome et de Firefox fonctionne très bien.
    • Edit : Il semble que c'était le new Datequi ne fonctionnait pas, en fait, comme je le faisais sur une chaîne telle que Feb 2017. Et IE ne semble pas apprécier plus que ça.
    InformationsquelleAutor Moustafa Shama
  3. 0

    Vous pourriez formater les dates avant de les ajouter à votre tableau. C'est la façon dont je l'ai fait. J'ai utilisé AngularJS

    //convertir la date en format standard

    var dt = new Date(date);

    //prenez seulement la date et du mois et de la pousser à votre étiquette de tableau

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

    Utiliser ce tableau dans votre tableau de présentation

    InformationsquelleAutor shafeerambatt