在flot饼图中重叠标签

Question

我使用jquery flot作为我的饼图,当饼图片非常小时我遇到重叠标签的问题.那有一个很好的解决方案吗？

我的饼图:

series: { 
                pie: { 
                    show: true, 
                    radius: 1, 
                    label: { 
                        show: true, 
                        radius: 5/8, 
                        formatter: function(label, series){ 
                            return '<div style="font-size:12pt;text-  align:center;padding:2px;color:black;margin-left:-80%;margin-  top:-20%;">'+label+'<br/>'+Math.round(series.percent)+'%</div>'; 
                        }, 
                        background: { opacity: 0.5 } 
                    } 
                } 
            }, 
            legend: { 
                show: false 
            }

谢谢,阿尔沙夫斯基亚历山大.

Answer 1

来自Marshall Leggett的 Flot Google代码问题的解决方案(链接):

我发现饼图标签在较小的饼图中重叠似乎很常见,因为它们不可读,特别是如果几个切片的百分比值很小.这是使用jquery.flot.pie插件.
请参阅附图.我已经解决了这个问题,在标签渲染代码中增加了一个防冲突程序.我也附上了修改过的插件的副本.参见第472-501行,特别是新函数getPositions()和comparePositions().这部分基于ŠimeVidas的DOM元素碰撞检测代码.像这样的东西可能是馅饼库的一个很好的补充.

长话短说:

1. 在jquery.flot.pie.js中以及包含以下内容的第463行之后:

   label.css('left', labelLeft);

添加以下代码:

// check to make sure that the label doesn't overlap one of the other labels
var label_pos = getPositions(label);
for(var j=0; j<labels.length; j++)
{
var tmpPos = getPositions(labels[j]);
var horizontalMatch = comparePositions(label_pos[0], tmpPos[0]);
var verticalMatch = comparePositions(label_pos[1], tmpPos[1]);                  
var match = horizontalMatch && verticalMatch;                           
if(match)
{
    var newTop = tmpPos[1][0] - (label.height() +1 );
    label.css('top', newTop);
    labelTop = newTop;
}       
}

function getPositions(box) {
        var $box = $(box);
        var pos = $box.position();
        var width = $box.width();
        var height = $box.height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}

function comparePositions(p1, p2) {
        var x1 = p1[0] < p2[0] ? p1 : p2;
        var x2 = p1[0] < p2[0] ? p2 : p1;
        return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
}
labels.push(label);

2. 添加以下内容即可drawLabels()完成:

   var labels = [];

Answer 2

你可以尝试在一定百分比下隐藏一些标签:

pie: { 
    label: {
         threshold: 0.1
    }
}

请参阅http://people.iola.dk/olau/flot/examples/pie.html上的图表/示例6