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

Question

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

以下是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

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

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