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

Question

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

这是 jsFiddle 的示例

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

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

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

我想展示：

Browser share: 40 (data value instead of percentage)

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

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

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

我怎样才能做到这两件事？

Answer 1

您可以使用格式化字符串来帮助您格式化数字和日期。

x 小数位

查看 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%`

千位分隔符

查看 JSFiddle

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

---

在文档中阅读更多内容：

文档：http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

Answer 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) +' %';
}

Answer 3

这是关于工具提示格式化程序的详细说明http://api.highcharts.com/highcharts#tooltip.formatter

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

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

Answer 4

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