解决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好看。
Highcharts的基本属性和方法详解 IE中Javascript脚本失效BUG解决方法
还没遇到这种情况
做饼状图时很基本会出现的。
路过,留个言,支持下