2012-08-09 9 views
12

Ich gebe, dass Werte Kreisdiagramm Highcharts:Zahlenformatierung bei Highcharts Diagrammwerte?

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

aber es zeigt sich, wie das bei Kreisdiagramm:

A -> 75.00000000000001 % 
B-> 25 % 

Sie formatieren Tooltips bei Highcharts wie etwa Diagrammwerte können?

enter image description here

Antwort

14

Wir tun Tooltip-Formatierungsoptionen haben den Wert als Nummer anzuzeigen statt prozentualer

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

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

this.point.y den Trick (jetzt haben Sie this.percentage in diesem Ort)

+6

Wenn Sie ToFixed (2) hinzufügen, ist es die Antwort. – kamaci

+0

yeah, Das wird gut aussehen – pdpMathi

19

plotOptions.pie.dataLabels.formatter ist eine Funktion, die Sie das Etikett formatiert werden lassen. In diesem Fall habe ich this.percentage.toFixed(2) zurückgegeben, die Ihre Zahl auf 2 Dezimalstellen trimmen wird. Demo bei this jsFiddle

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

genial - toller Tipp ... –

+0

Dank für this.percentage.toFixed (2) Ich brauchte diese –

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

dies nicht ist, die Werte der Formatierung.

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, '.'); 
     } 
    } 
}]; 

Die Formart der Werte kann in den dataLables in den Daten geändert werden.

+0

danke es funktioniert für mich. –

Verwandte Themen