我第一次使用HighCharts JS,迄今为止,我非常满意。 我正在制作多个系列的图表,并使用共享工具提示。 共享工具提示中的数字是正确的,但它们的格式不符合我的要求。 例如,我看到的是9876
而不是9,876
。
我知道可以使用格式化程序完全自定义工具提示。但是我只想格式化数字并保留现有的外观和感觉,而不是完全重做工具提示。
问题:是否可以指定工具提示中的数字格式而无需编写自定义格式化程序?
我第一次使用HighCharts JS,迄今为止,我非常满意。 我正在制作多个系列的图表,并使用共享工具提示。 共享工具提示中的数字是正确的,但它们的格式不符合我的要求。 例如,我看到的是9876
而不是9,876
。
我知道可以使用格式化程序完全自定义工具提示。但是我只想格式化数字并保留现有的外观和感觉,而不是完全重做工具提示。
问题:是否可以指定工具提示中的数字格式而无需编写自定义格式化程序?
很遗憾,我怕这是不可能的:默认的工具提示格式化程序有点隐藏在Point
和Tooltip
对象中,并且没有提供访问数字格式化的方式。
但是,您可以全局覆盖Point
的默认实现的tooltipFormatter
,使用自己的内容,例如:
Highcharts.Point.prototype.tooltipFormatter = function (useHeader) {
var point = this, series = point.series;
return ['<span style="color:' + series.color + '">', (point.name || series.name), '</span>: ',
(!useHeader ? ('<b>x = ' + (point.name || point.x) + ',</b> ') : ''),
'<b>', (!useHeader ? 'y = ' : ''), Highcharts.numberFormat(point.y, 0), '</b>'].join('');
};
除了最后一行的Highcharts.numberFormat
调用会对您的数字进行格式化,此实现与默认实现相同。
请记住,这样的更改将适用于您所有的图表。
使用pointFormatter
来格式化共享提示信息。这个功能从版本4.1.0开始提供:
tooltip: {
shared: true,
pointFormatter: function() {
return '<span style="color:' + this.series.color + ';">●</span> ' + this.series.name + ': <b>' + numberFormat(this.y) + '</b><br/>';
}
}
从2.2版本开始,有一个新选项“pointFormat”,可以为点值指定单独的格式化程序: http://api.highcharts.com/highcharts#tooltip.pointFormat
在 highchart 脚本中应用 Math.round()
函数的方法。
series: [{
type: 'pie',
name: 'CPU (GHz)',
data: [
['Used',Math.round( <?php echo $gSum_Allocated_CPU; ?>, 2)],
{
name: 'Available',
y:Math.round(<?php echo $gSum_Available_CPU; ?>, 2),
sliced: true,
selected: true
}
]
}]
useHTML:true
设置为图表工具提示的选项,并将上面代码中最后一行的<b>
标签替换为类似于<b style="position: absolute; right: 0">
的内容,但是在使用HTML时似乎存在一些令人讨厌的渲染问题(标签框未始终正确调整大小)。需要进一步调查... - Julian D.thousandsSep
属性,默认为逗号分隔符(,
)- 对我来说,这更暗示了默认数字字符串呈现方式(无论上下文和包含标记)将使用逗号分隔千位数,但事实并非如此。为什么这与问题无关? - Barney