自定义工具提示并将数字格式化为高图的小数点后 2 位

Posted 2023-02-16

【中文标题】自定义工具提示并将数字格式化为高图的小数点后 2 位

【英文标题】：Customize tooltip and format the number to 2 decimal places of highcharts

【发布时间】：2012-09-19 16:04:00

【问题描述】：

我正在使用 Highcharts 图表来显示饼图。我想更改工具提示以显示实际的 data 字段以及系列名称来代替百分比值。

Here is the sample at jsFiddle

如果您检查上述示例，您会发现 2 件事

工具提示是：pointFormat: 'series.name: point.percentage%' 即

浏览器份额：一些百分比值

我要显示：

Browser share: 40 (data value instead of percentage)

2。接下来是饼图中每个部分的显示文本。可以看到n 的小数位数使图表看起来非常难看。

我只想显示最多 2 个小数点的数字，例如工具提示中使用的 percentageDecimals: 1。

我为第一个尝试了一些东西，比如返回对象数组的 series.data。还有 series.data[0]。但目前没有成功

我怎样才能同时做这两件事？

【参考方案1】：

您可以使用Format Strings 帮助您格式化数字和日期。

x 小数位

View the JSFiddle

// point.percentage = 29.9345816
pointFormat: 'point.percentage:.0f%' // returns: `30%` - (rounds to nearest)
pointFormat: 'point.percentage:.1f%' // returns: `29.9%`
pointFormat: 'point.percentage:.2f%' // returns: `29.93%`
pointFormat: 'point.percentage:.3f%' // returns: `29.935%`

千位分隔符

View the JSFiddle

// point.percentage = 1029.9
point.percentage:,.0f // returns: `1,030`
point.percentage:,.1f // returns: `1,029.9`

---

在文档中阅读更多内容：

Documentation: http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

【讨论】：

它是否支持任何其他选项？在哪里可以找到此类数字格式的参考资料？

第二个代码块很有趣。这是否适用于增加逗号数量，例如：1,000,029.9？我需要把它改成point.percentage:,,.1.f吗？

它还支持百分比格式吗？文档没有此信息。另外，我在 JSFiddler 中尝试了 pointFormat: 'point.percentage:.0f%' 但它不起作用。

@developer 我不确定 highcharts 的较新版本，但您应该能够使用此处描述的自定义格式化程序回调：highcharts.com/docs/chart-concepts/…

【参考方案2】：

您可以通过将工具提示 pointFormat 从 pointFormat: 'series.name: <b>point.percentage%</b>', 修改为 pointFormat: 'series.name: <b>point.y%</b>', 来更改它以显示数据值

您可以使用格式化程序中的Highcharts.numberFormat() 函数来对数字进行四舍五入：

formatter: function() 
    return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';

【讨论】：

这是正确的并且有效，但这不是我要寻找的确切答案。您的答案会更改标签而不是工具提示。虽然我通过在工具提示中使用point.y 来获取数据来解决我的第一个疑问。但是第二个问题仍然没有答案。

对不起，我重新阅读了问题并更新了我的答案，请再次检查

太棒了！这就是我要找的。感谢您的帮助。

【参考方案3】：

这里是关于tooltip formatterhttp://api.highcharts.com/highcharts#tooltip.formatter的详细说明

this.point (not shared) / this.points[i].point (shared)

如果this.point 不起作用，请尝试this.points[i].point

【参考方案4】：

显示实际数据值的最简单方法是省略格式化程序函数。工具提示将默认显示实际数据。