排行榜。饼形图。数据标签格式化程序

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) 困难（更通用的解决方案）：计算所需的 top/left 偏移量。这很难，因为您不知道标签的边界框。我建议为标签的那部分设置固定 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>';
                }
            }

排行榜。饼形图。数据标签格式化程序

Highcharts. Pie chart. DataLabels formatter

javascript

jquery

charts

highcharts