在Highcharts中格式化提示框数字

Question

我使用tooltip.pointFormat来在工具提示中呈现附加数据。不幸的是，只有point.x被正确地格式化为千分位分隔符。

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

- Andreas Köberle

---

你有意使用“点”作为thousandsSep吗？ - Aleksei Matiushkin

是的，因为我在德国。 - Andreas Köberle

有没有办法在单个值中同时显示千位分隔符（,）和两位小数点格式？ - Dhaval Panchal

Answer 1

在这里找到答案。

数字采用C库函数sprintf的浮点格式化约定的子集进行格式化。 格式化内容附加在变量括号内，在冒号分隔。例如：

• 保留两位小数：“{point.y:.2f}”
• 千分位分隔符，无小数位：{point.y:,.0f}
• 千分位分隔符，一位小数：{point.y:,.1f}

因此，在括号内使用:,.1f将正确格式化数字。

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

jsFiddle

- Andreas Köberle

---

请注意，只有在我像您在jsFiddle中所做的那样指定Highcharts lang decimalPoint和thousandsSep值时，这才对我有效。 - Lebowski156

Answer 2

使用tooltip formatter代替pointFormat，然后再使用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/>';
            }
        },

示例：http://jsfiddle.net/8rx1ehjk/4/

- Sebastian Bochan

---

我之前就知道这个问题并试图避免它，因为我需要支持一大堆图表的德语和英语格式。因此，为所有图表设置一次格式比为每个单独的图表设置格式更方便。此外，标题中的格式化日期现在也丢失了。 - Andreas Köberle

Answer 3

在我们的情况下，tooltipFormatter 仅适用于 y 属性的格式，我找到了几种方法可以不仅为 y 添加格式，

1. add format for each tooltip and for each property like this point.count:,.f

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

2. create small extension like this

   (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

- Oleksandr T.