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

2013年10月31日 MK JS 4 阅读 12954次

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

这样有两种方法来解决：

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

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

修改后的函数为：

 * 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
 };
 },

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

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

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

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

highchart, js, 小数位, 方法, 饼状图

Highcharts的基本属性和方法详解 IE中Javascript脚本失效BUG解决方法