Highcharts 自定义工具提示并将数字格式设置为高图表的小数点后2位
我正在使用Highcharts图形显示饼图。我想更改工具提示,以显示实际的Highcharts 自定义工具提示并将数字格式设置为高图表的小数点后2位,highcharts,Highcharts,我正在使用Highcharts图形显示饼图。我想更改工具提示,以显示实际的数据字段以及系列名称,而不是百分比值 如果你检查上面的样本,你会发现两件事 工具提示是:pointFormat:“{series.name}:{point.percentage}%”,即 浏览器共享:某些百分比值 我想展示: Browser share: 40 (data value instead of percentage) 二,。接下来是饼图中每个部分的显示文本。你可以看到小数的数量使得图表看起来非常难看 我只想
数据
字段以及系列名称,而不是百分比值
如果你检查上面的样本,你会发现两件事
Browser share: 40 (data value instead of percentage)
二,。接下来是饼图中每个部分的显示文本。你可以看到小数的数量使得图表看起来非常难看
我只想显示最多2个小数点的数字,如工具提示中使用的百分比小数:1
我尝试了一些类似于series.data的东西,它返回一个对象数组。另外还有series.data[0]。但迄今为止没有成功
如何做这两件事?您可以通过修改工具提示
pointFormat
从pointFormat:'{series.name}:{point.percentage}%',
到pointFormat:'{series.name}:{point.y}%',
您可以使用格式化程序中的Highcharts.numberFormat()
函数对数字进行四舍五入:
格式化程序:函数(){
返回“+this.point.name+”:“+Highcharts.numberFormat(this.percentage,2)+'%”;
}
以下是关于工具提示格式化程序的详细说明
然后尝试this.points[i]。如果this.point
不起作用,可以使用它来帮助设置数字和日期的格式
x小数位
千分离机
请阅读文档中的更多内容:
显示实际数据值的最简单方法是省略formatter函数。工具提示将默认显示实际数据 这是正确的,它的工作,但这不是确切的答案,我在寻找。答案将更改标签而不是工具提示。虽然我可以通过使用工具提示中的point.y
获取数据来解决我的第一个疑问。但是第二个问题仍然没有回答。对不起,我重新阅读了问题并更新了我的答案,请再次检查!这就是我要找的。谢谢你的帮助。它支持其他选择吗?在哪里可以找到这种数字格式的参考?第二个代码块很有趣。这是否适用于逗号数量的增加,例如:1000029.9
?我需要将其更改为{point.percentage:,.1.f}
?
this.point (not shared) / this.points[i].point (shared)
// 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%`
// point.percentage = 1029.9
{point.percentage:,.0f} // returns: `1,030`
{point.percentage:,.1f} // returns: `1,029.9`