自定义工具提示和格式化数highcharts的2位小数(Customize tooltip and

我使用Highcharts图表中显示的饼图。 我想改变工具提示中显示的实际data与地方的百分比值的系列名称沿磁力。

这里是一个的jsfiddle样本

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

1. 工具提示：pointFormat： '{series.name} {} point.percentage％'，即

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

我想说明：

Browser share: 40 (data value instead of percentage)

2.接下来是用于馅饼的每个部分中的显示文本。 人们可以看到n小数制作图形的数量看起来非常难看。

我想显示的数字仅2个高达小数点像percentageDecimals: 1的工具提示使用。

我尝试一些东西像series.data返回对象的数组1日。 也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:

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

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 3:

以下是有关提示格式化的详细说明http://api.highcharts.com/highcharts#tooltip.formatter

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

并尝试this.points[i].point如果this.point没有工作

文章来源: Customize tooltip and format the number to 2 decimal places of highcharts