明凯博客

关注网站技术,一个特立独行的程序员

解决HighChart画饼状图时小数位精度BUG的方法

用 highchart 做饼状图时,小数位数会有很多位,这样很影响美观。

这样有两种方法来解决:

一、直接修改highchart.js的内置函数

将Point.prototype 这个类里的getLabelConfig函数中的percentage字段的值修改为”Math.round(point.percentage,2)”。

修改后的函数为:

1
2
3
4
5
6
7
8
9
10
11
12
13
 * Return the configuration hash needed for the data label and tooltip formatters
 getLabelConfig: function () {
 var point = this;
 return {
 x: point.category,
 y: point.y,
 key: point.name || point.category,
 series: point.series,
 point: point,
 percentage: Math.round(point.percentage,2), //point.percentage
 total: point.total || point.stackTotal
 };
 },

二、将前端的数据进行格式化

1
2
3
4
5
tooltip:{
      formatter: function () {  
      return '' + this.point.name + ': ' +Highcharts.numberFormat(this.percentage, 2) + ' %';  
        } 
},

这样就能显示为两数小数的百分数。

但是处理以后,有可能综合不为100%了。但是总比很多小数位的BUG好看。

, , , ,

相关文章

3 条评论 “解决HighChart画饼状图时小数位精度BUG的方法

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注