我有一张饼图。我需要以某种方式格式化DataLabels。所以我用:
dataLabels: {
useHTML : true,
formatter: function () {
if(this.point.id == 'razr') {
return '<div><b>' + this.point.y + '</b></div><div style="left: -140px; text-align: center; position: absolute"><b>sum is:<br/>' + this.point.summ + ' </b></div>';
} else return '<b>' + this.point.y + '<b>';
}
}
我得到了什么:
我的问题在这里style="left: -140px;
。这个职位是静态的。我找不到任何方法将我的sum label
置于图表绿点的中心。我一直在搜索一个点的属性(比如plotX
,graphic
attr),没有任何帮助。如果我删除style="left: -140px;
数据标签将向右移动。如何获得绿点的坐标?
答案 0 :(得分:3)
说实话,这并不容易。我看到两种可能的解决方案:
1)简单(但是很脏的解决方法):在第一个饼图下创建具有相同值的第二个饼图,但只渲染一个标签。然后第二个饼图在切片内可以有dataLabel
。
2)硬(更通用的解决方案):计算所需的上/下偏移。这很难,因为你不知道标签的边界框。我建议为标签的那一部分设置固定的width
+ height
- 这样您就可以找到该标签的中心部分。然后使用series.center
和point.labelPos
数组计算位置。这些是内部选项,可以在不同版本之间进行更改,因此请在升级之前密切关注这些选项。示例:http://jsfiddle.net/zwb5toe9/2/
dataLabels: {
useHTML: true,
formatter: function () {
var point = this.point,
width = 50,
height = 50,
series = point.series,
center = series.center, //center of the pie
startX = point.labelPos[4], //connector X starts here
endX = point.labelPos[0] + 5, //connector X ends here
left = -(endX - startX + width / 2), //center label over right edge
startY = point.labelPos[5], //connector Y starts here
endY = point.labelPos[1] - 5, //connector Y ends here
top = -(endY - startY + height / 2); //center label over right edge
// now move inside the slice:
left += (center[0] - startX)/2;
top += (center[1] - startY)/2;
if (point.id == 'razr') {
console.log(this);
return '<div><b>' + point.y + '</b></div><div style="width: ' + width + 'px; left:' + left + 'px;top:' + top + 'px; text-align: center; position: absolute"><b>sum is:<br/>' + point.summ + ' </b></div>';
} else return '<b>' + point.y + '<b>';
}
}