Tooltip-Nummern in Highcharts formatieren

Question

Ich verwende tooltip.pointFormat, um zusätzliche Daten im Tooltip zu rendern. Leider ist nur point.x korrekt mit einem Tausendertrennzeichen formatiert.

jsFiddle

$(function() { 
    Highcharts.setOptions({ 
    global: { 
     useUTC: false, 
    }, 
    lang: { 
     decimalPoint: ',', 
     thousandsSep: '.' 
    } 
    }); 
    $('#container').highcharts({ 
    xAxis: { 
     type: 'datetime' 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count}</b><br/>', 
     shared: true 
    }, 
    series: [{ 
     data: [{ 
     y: 20009.9, 
     count: 20009.9 
     }, { 
     y: 10009.9, 
     count: 20009.9 
     }, { 
     y: 40009.9, 
     count: 20009.9 
     }], 
     pointStart: Date.UTC(2010, 0, 1), 
     pointInterval: 3600 * 1000 // one hour 
    }] 
    }); 
}); 

Answer 1

Konnten Sie die Antwort here.

Zahlen werden mit einer Teilmenge der Float-Formatierungskonventionen aus der C-Bibliothek funciton sprintf formatiert. Die Formatierung wird in die variablen Klammern, getrennt durch einen Doppelpunkt angehängt. Zum Beispiel:

• zwei Dezimalstellen: "{point.y:.2f}"
• Tausendertrennzeichen, keine Dezimalstellen: {point.y:,.0f}
• Tausendertrennzeichen, eine Nachkommastelle: {point.y:,.1f}

mit So :,.1f innen Die Klammern formatieren die Nummer korrekt.

tooltip: { 
    pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count:,.1f}</b><br/>', 
    shared: true 
} 

jsFiddle

Answer 2

instaed von point, verwenden Sie die tooltip formatter und dann Highcharts.numberFormat

tooltip: { 
      formatter:function(){ 

       return this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.options.count,1,',','.') + '</b><br/>' + 'Count: <b>'+Highcharts.numberFormat(this.point.y,1,',','.')+'</b><br/>'; 
      } 
     }, 

Beispiel: http://jsfiddle.net/8rx1ehjk/4/

Answer 3

In unserem Fall tooltipFormatter Format gilt nur für y Eigenschaft, fand ich paar Möglichkeiten, wie Format hinzuzufügen, nicht nur für y,

1. -Format für jeden Tooltip und für Jede Eigenschaft wie diese point.count:,.f

   pointFormat: '{series.name}: <b>{point.count:,.f}</b><br/>' + 'Count: <b>{point.y}</b><br/>', 
   

2. schaffen kleine Erweiterung wie diese

   (function (Highcharts) { 
       var tooltipFormatter = Highcharts.Point.prototype.tooltipFormatter; 
   
       Highcharts.Point.prototype.tooltipFormatter = function (pointFormat) { 
       var keys = this.options && Object.keys(this.options), 
        pointArrayMap = this.series.pointArrayMap, 
        tooltip; 
   
       if (keys.length) { 
        this.series.pointArrayMap = keys; 
       }  
   
       tooltip = tooltipFormatter.call(this, pointFormat);   
       this.series.pointArrayMap = pointArrayMap || ['y']; 
   
       return tooltip; 
       } 
   }(Highcharts)); 
   

Example