web-dev-qa-db-fra.com

HighCharts affiche le format datetime sur xAxis

J'essaie d'afficher dateTime au format jour/semaine/mois sur l'axe x des graphiques hauts J'ai les données formatées au format x utc date time et y (magnitude). J'avais l'impression d'avoir seulement besoin de faire ça pour que ça marche

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: "%e. %b",
      month: "%b '%y",
      year: "%Y"
    }
  },
  series: [{
    data: [
      [1493326164493, 100],
      [1493326194018, 120]
    ]
  }]
});

Qu'est-ce que je fais mal? J'ai posté un lien violon ci-dessous pour mon scénario

https://jsfiddle.net/dLfv2sbd/

javascriptdatetimehighcharts
8
lboyel

axis.dateTimeLabelFormats fonctionne un peu différemment. En premier lieu, Highcharts essaie de deviner quelle est la `` meilleure unité '' de vos données et, par exemple s'il s'agit d'un jour, il le formatera en fonction de la propriété day de dateTimeLabelFormats.

Si vous souhaitez simplement formater les étiquettes d'axe, vous pouvez utiliser axis.labels.format et spécifier un format comme celui-ci:

xAxis: {
  type: 'datetime',
  labels: {
    format: '{value:%Y-%b-%e}'
  },

exemple: https://jsfiddle.net/dLfv2sbd/1/

11
morganfree

Vous pouvez essayer de formater la date avec

 xAxis: {
   labels: {
    formatter: function(){

      return moment(new Date(this.value)).format('DD'); // example for moment.js date library

      //return this.value;
    },
},

Vous pouvez également consulter la documentation http://api.highcharts.com/highcharts/xAxis.labels.formatter

4
Leguest

Vous pouvez également essayer ceci -

  1. {valeur:% Y-% b-% e% l:% M% p}
labels: {
      format: '{value:%Y-%b-%e %l:%M %p }'
},

Sortie - 27 avril 2017 20 h 49

  1. format: '{valeur:% Y-% b-% e% l:% M}'
labels: {
          format: '{value:%Y-%b-%e %l:%M %p }'
},

Sortie - 27 avril 2017 8:49

  1. format: '{valeur:% Y-% b-% e}'
 labels: {
              format: '{value:%Y-%b-%e}'
 },

Sortie - 2017-avr-27

  1. format: '{valeur:% Y-% b-% e% H:% M}'
labels: {
      format: '{value:%Y-%b-%e %H:%M}'
},

sortie 2017-avr-27 20:49

2
Samir

Format simple année-mois-jour:

 format: '{value:%Y-%m-%e}'
0
Alessandro Mattiuzzi