Highcharts。 饼形图。 DataLabels格式化程序
我有一个饼图。 我需要在某种程度上格式化DataLabels。 所以我使用:
dataLabels: { useHTML : true, formatter: function () { if(this.point.id == 'razr') { return '' + this.point.y + 'sum is:
' + this.point.summ + ' '; } else return '' + this.point.y + ''; } }
我得到了什么:
我的问题在这里是style="left: -140px;
这个位置是静态的。我找不到任何方法将我的sum label
放在图表绿点的中心。我一直在寻找一个属性point(如plotX
, graphic
attr),没有任何帮助。如果我删除style="left: -140px;
datalabel将向右移动。 如何获得绿点的坐标?
说实话,这并不容易。 我看到两种可能的解决方案
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 '' + point.y + 'sum is:
' + point.summ + ' '; } else return '' + point.y + ''; } }