web-dev-qa-db-fra.com

personnaliser l'infobulle des graphiques pour afficher l'heure et la date

Je développe un projet qui devrait montrer ce graphique: http://jsfiddle.net/Kc23N/

Lorsque je clique sur un point (info-bulle), je veux afficher une date compréhensible, pas la valeur en millisecondes.

Je pense qu'il faut changer ce morceau de code:

tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x} date, {point.y} Kg',                        
}

comment fais-je? toute aide aimable est appréciée.

Merci

javascriptjquerychartshighchartstooltip
24
SkyNet_citizen

Vous pouvez utiliser moment.js pour obtenir les valeurs formatées, mais Highcharts a sa propre fonctionnalité de formatage de date qui serait plus idiomatique avec Highcharts. Il peut être attaché à l'option info-bulle dans le constructeur highcharts comme ceci:

        tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +'</b><br/>' +
                    Highcharts.dateFormat('%e - %b - %Y',
                                          new Date(this.x))
                + ' date, ' + this.y + ' Kg.';
            }
        }

Vous pouvez également ajouter l'objet dateTimeLabelFormats avec les options dont vous avez besoin pour vos dates, sous le xAxis.

J'ai fait cet exemple avec votre code

54
rscnt

Vous devez utiliser xDateFormat dans l'info-bulle pour personnaliser votre date de format
http://api.highcharts.com/highcharts#tooltip.xDateFormat

sample:
tooltip: {
           xDateFormat: '%Y-%m-%d'
         },
49
Quy Le

Vous pouvez utiliser {value:%Y-%m-%d} filtre de modèle.

À titre d'exemple:

headerFormat: '<span style="font-size: 10px">{point.key:%Y-%m-%d}</span><br/>'
17
Wang Xiao

Vous devez renvoyer une date formatée dans l'info-bulle à l'aide du formateur d'infobulles.

Voici le API de formateur d'infobulles pour votre référence.

Pour formater la partie date, vous pouvez utiliser Highcharts.dateFormat()

Le format est un sous-ensemble des formats pour la fonction strftime de PHP.

Vous pouvez également faire référence PHP's strftime pour plus de formats de date.

J'ai réussi à formater votre info-bulle comme ci-dessous.

  tooltip: {
                formatter: function() {
                    return  '<b>' + this.series.name +'</b><br/>' +
                        Highcharts.dateFormat('%e - %b - %Y',
                                              new Date(this.x))
                    + '  <br/>' + this.y + ' Kg.';
                }
            }
12
Gopinagh.R