Javascript 在 Highcharts 中格式化工具提示数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27144967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Format tooltip numbers in Highcharts
提问by Andreas K?berle
I use tooltip.pointFormatto render additional data in the tooltip. Unfortunately only point.xis formatted correctly with a thousand separator.
我用来tooltip.pointFormat在工具提示中呈现附加数据。不幸的是，只有point.x使用千位分隔符正确格式化。
$(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
}]
});
});
回答by Andreas K?berle
Found the answer here.
在这里找到了答案。
Numbers are formatted with a subset of float formatting conventions from the C library funciton sprintf. The formatting is appended inside the variable brackets, separated by a colon. For example:
- Two decimal places: "
{point.y:.2f}"- Thousands separator, no decimal places:
{point.y:,.0f}- Thousands separator, one decimal place:
{point.y:,.1f}
数字使用来自 C 库函数 sprintf 的浮点格式化约定的子集进行格式化。格式附加在变量括号内，用冒号分隔。例如：
- 两位小数：“
{point.y:.2f}”- 千位分隔符，无小数位：
{point.y:,.0f}- 千位分隔符，一位小数：
{point.y:,.1f}
So using :,.1finside the brackets will format the number correctly.
所以:,.1f在括号内使用将正确格式化数字。
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count:,.1f}</b><br/>',
shared: true
}
回答by Sebastian Bochan
Instaed of pointFormat, use the tooltip formatterand then Highcharts.numberFormat
Instaed of 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/>';
}
},
Example: http://jsfiddle.net/8rx1ehjk/4/
回答by Alexander T.
In our case tooltipFormatterapplies format only for yproperty, I found couple ways how to add format not only for y,
在我们的例子中，tooltipFormatter仅对y属性应用格式，我发现了几种方法如何不仅为y、
add format for each tooltip and for each property like this
point.count:,.fpointFormat: '{series.name}: <b>{point.count:,.f}</b><br/>' + 'Count: <b>{point.y}</b><br/>',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));
为每个工具提示和每个属性添加格式
point.count:,.fpointFormat: '{series.name}: <b>{point.count:,.f}</b><br/>' + 'Count: <b>{point.y}</b><br/>',创建这样的小扩展
(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));
