Personnaliser tooltip et formater le nombre à 2 décimales de highcharts
j'utilise le graphe Highcharts pour afficher un diagramme à secteurs. Je veux changer l'info-bulle pour afficher l' data champ accompagné du nom de la série à la place du pourcentage.
Voici l'échantillon de jsFiddle
Si vous cochez l'exemple ci-dessus, vous trouverez 2 choses
info-bulle : pointFormat: '{la série.nom}: {point.pourcentage}% ' i.e.
partage du navigateur: un certain pourcentage de valeur
je veux afficher:
Browser share: 40 (data value instead of percentage)
2. Ensuite, le texte affiché pour chaque section du diagramme. On peut voir n nombre de décimales rendant le graphique très laid.
je veux afficher uniquement les numéros de jusqu'à 2 décimales comme percentageDecimals: 1 utilisé dans l'info-bulle.
j'ai essayé peu de choses pour la 1ère série.les données qui retourne un tableau d'objets. Également de série.data[0]. Mais sans succès jusqu'à présent
Comment Je fais ces deux choses?
3 réponses
vous pouvez le modifier pour qu'il affiche la valeur des données à la place en modifiant votre tooltip pointFormatpointFormat: '{series.name}: <b>{point.percentage}%</b>',pointFormat: '{series.name}: <b>{point.y}%</b>',
vous pouvez arrondir les nombres en utilisant le Highcharts.numberFormat() fonction de la façon dans votre formateur:
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';
}
Vous pouvez utiliser Chaînes De Format pour vous aider à formater les nombres et les dates.
x décimales
Voir la JSFiddle
// point.percentage = 29.9345816
pointFormat: '{point.percentage:.0f}%' // returns: `30%` - (rounds to nearest)
pointFormat: '{point.percentage:.1f}%' // returns: `29.9%`
pointFormat: '{point.percentage:.2f}%' // returns: `29.93%`
pointFormat: '{point.percentage:.3f}%' // returns: `29.935%`
séparateur de Milliers
Voir la JSFiddle
// point.percentage = 1029.9
{point.percentage:,.0f} // returns: `1,030`
{point.percentage:,.1f} // returns: `1,029.9`
Lire la suite dans la documentation:
Documentation: http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
Voici une description détaillée sur info-bulle formateur http://api.highcharts.com/highcharts#tooltip.formatter
this.point (not shared) / this.points[i].point (shared)
Et essayer this.points[i].point si this.point n'a pas fonctionné