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

Question

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

Here is the sample at jsFiddle

如果你检查上面的例子，你会发现两件事

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

您可以更改它，以便通过修改工具提示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 2

您可以使用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

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

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