使用高图表库创建饼图,但它在切片之间为负值创建空白空间。
我想删除该空白区域,并希望将负值显示为 0.0。
以下是我的代码。
[http://jsfiddle.net/mukeshkumartech/xnxL3adL/][1]
通过这段代码,您可以看到"Firefox"的数据不会显示为 0.0,而不会创建 sapce。
您可以在将数据传递给图表构造函数之前准备数据,如下所示:
data: [
['Firefox', -45.089],
['IE', 26.8],
['Chrome:', -10],
['Safari', 8.5],
['Opera', 6.298],
['Others', 0.7]
].map(function(pointArr) {
var newPoint = {
name: pointArr[0]
},
value = pointArr[1];
if (value < 0) {
newPoint.y = 0;
newPoint.negY = value;
} else {
newPoint.y = value
}
return newPoint;
})
如果该值为负数,则我使用 0
作为 y
属性并将原始值保存在 negY
属性中,以便稍后在dataLabels.formater
中使用它:
dataLabels: {
enabled: true,
formatter: function() {
console.log(this);
var point = this.point;
return this.key + " - value: " + (point.negY ? point.negY : point.y);
}
}
现场工作示例:http://jsfiddle.net/kkulig/6u7Lzfu9/
API 参考:https://api.highcharts.com/highcharts/series.pie.dataLabels.formatter