高图.饼形图. DataLabels格式化程序 [英] Highcharts. Pie chart. DataLabels formatter

问题描述

我有一个饼图.而且我需要以某种方式格式化DataLabels.所以我用:

I have a pie chart. And I need to format DataLabels in someway. So I use:

    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;，datalabel将移到右侧.如何获取绿点的坐标?

My problem is here style="left: -140px;. The position is static. I can't find any way to position my sum label at the center of a green point of a chart. I've been searching the properties of a point (like plotX, graphic attr), nothing helps. If I remove style="left: -140px; datalabel will moves to the right. How can I get coordinates of my green point?

推荐答案

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

To be honest, it's not easy. I see two possible solutions:

1)简单(但变通的解决方法):在第一个饼图下创建具有相同值的第二个饼图，但仅呈现一个标签.然后，第二个饼图可以在切片中包含dataLabel.

1) Easy (but dirty workaround): create second pie chart under the first one with the same values, but render just one label. Then the second pie chart can have dataLabel inside the slice.

2)硬性(更通用的解决方案):计算所需的顶部/左侧偏移量.这很困难，因为您不知道标签的边界框.我建议为标签的该部分设置固定的width + height-这样您就可以找到该标签部分的中心.然后使用series.center和point.labelPos数组计算位置.这些是内部选项，可以在版本之间进行更改，因此在升级之前请留意这些选项.示例: http://jsfiddle.net/zwb5toe9/2/

2) Hard (more generic solution): calculate required top/left offsets. It's hard because you don't know bounding box of the label. I suggest to set fixed width+height for that part of the label - so you can find center of that label's part. Then calculate position using series.center and point.labelPos arrays. These are inner options and can change between versions, so keep an eye on these options before upgrading. Example: 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>';
                }
            }

这篇关于高图.饼形图. DataLabels格式化程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！