web-dev-qa-db-fra.com

Personnalisez l'info-bulle et formatez le nombre à 2 décimales des graphiques

J'utilise le graphique Highcharts pour afficher un graphique à secteurs. Je souhaite modifier l'info-bulle pour afficher le champ data réel avec le nom de la série à la place du pourcentage.

Voici l'exemple sur jsFiddle

Si vous cochez l'échantillon ci-dessus, vous trouverez 2 choses

  1. L'info-bulle est: pointFormat: '{series.name}: {point.percentage}%' c'est à dire.

    Partage du navigateur: valeur en pourcentage

Je veux montrer:

Browser share: 40 (data value instead of percentage)

2. Ensuite, le texte d'affichage de chaque section du graphique. On peut voir n nombre de décimales rendant le graphique très laid.

Je souhaite afficher uniquement les nombres jusqu'à 2 décimales, comme percentageDecimals: 1 utilisé dans l'info-bulle.

J'ai essayé peu de choses pour 1st comme series.data qui retourne un tableau d'objets. Aussi series.data [0]. Mais aucun succès jusqu'à présent

Comment puis-je faire ces deux choses?

highcharts
34
DarkKnightFan

Vous pouvez le modifier pour qu'il affiche la valeur des données à la place en modifiant votre info-bulle pointFormat de pointFormat: '{series.name}: <b>{point.percentage}%</b>', À pointFormat: '{series.name}: <b>{point.y}%</b>',

Vous pouvez arrondir les nombres en utilisant la fonction Highcharts.numberFormat() comme ceci dans votre formateur:

formatter: function() {
    return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';
}
57
Suhail Patel

Vous pouvez utiliser Format Strings pour vous aider à formater les nombres et les dates.

x décimales

Voir le 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 le JSFiddle

// point.percentage = 1029.9
{point.percentage:,.0f} // returns: `1,030`
{point.percentage:,.1f} // returns: `1,029.9`

En savoir plus dans la documentation:

Documentation: http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

56
Anil

Voici une description détaillée du formateur d'infobulles http://api.highcharts.com/highcharts#tooltip.formatter

this.point (not shared) / this.points[i].point (shared)

Et essaye this.points[i].point si this.point n'a pas fonctionné

2
chenchun

L'approche la plus simple pour afficher les valeurs réelles des données consiste à omettre la fonction de formateur. L'info-bulle affichera par défaut les données réelles.

0
philellsworth