Highcharts。饼形图。 DataLabels格式化程序

Question

我有一个饼图。我需要在某种程度上格式化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;数据标签将移动到右侧。我怎样才能得到我的绿点的坐标？

Answer 1

说实话，这并不容易。我看到两种可能的解决方案：

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>'; 
       } 
      }