web-dev-qa-db-fra.com

Formatage des nombres aux valeurs du graphique Highcharts?

Je donne ces valeurs au graphique circulaire Highcharts:

  series:[
        {
            type:'pie',
            name:'Ratio',
            data:[
                ['A', 42.6],
                {
                    name:'B',
                    y:14.2,
                    sliced:true,
                    selected:true
                }
            ]
        }
    ]

Cependant, il le montre comme ça sur le graphique à secteurs:

A -> 75.00000000000001 %
B-> 25 %

Vous pouvez formater les info-bulles dans Highcharts, que diriez-vous des valeurs de graphique?

enter image description here

javascripthighcharts
13
kamaci

Nous avons des options de formatage d'infobulle pour afficher la valeur sous forme de nombre au lieu de pourcentage

http://api.highcharts.com/highstock#tooltip.formatter

tooltip: {
   formatter: function() {
      return '<b>'+ this.point.name +'</b>: '+ this.point.y ;
   }
},

this.point.y fera l'affaire (maintenant vous avez this.percentage à cet endroit)

15
pdpMathi

plotOptions.pie.dataLabels.formatter Est une fonction qui vous permettra de formater l'étiquette. Dans ce cas, j'ai renvoyé this.percentage.toFixed(2) qui coupera votre nombre à 2 décimales. Démo sur ce jsFiddle

plotOptions: {
    pie: {
        dataLabels: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
            }
        }
    }
},
19
Dennis

Vous pouvez simplement le formater comme ceci ci-dessous.

    tooltip: {
    pointFormat: "Value: {point.y:.2f}"
}

documentation sur le formatage des Highcharts

14
Stevie Qiao
tooltip: {
   pointFormat: "Value: {point.y:.2f}"
}

ce n'est pas pour formater les valeurs.

var data = [{
     name: 'Population',
     data: [],
     dataLabels: {
         enabled: true,
         rotation: -90,
         color: '#FFFFFF',
         align: 'right',
         x: 4,
         y: 10,
         style: {
             fontSize: '13px',
             fontFamily: 'Verdana, sans-serif',
             textShadow: '0 0 3px black'
         }, formatter: function() {
             return  Highcharts.numberFormat(this.y, 2, '.');
         }
     }
}];

le format des valeurs peut être modifié dans les étiquettes de données dans les données.

6
Adams.H
  tooltip: {
    pointFormat: "Percentage: {point.percentage:.2f}"
}

Cela vous donnera la valeur en pourcentage

0
Oduwole Oluwasegun