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 
      } 

感谢，Arshavski亚历山大。

Answer 1

从海军报的谷歌代码问题的解图/例6（link） ：

我发现，它似乎普遍馅饼标签重叠小于 饼图使它们无法读取，特别是如果几个切片具有小的百分比值时 。这是与jquery.flot.pie插件。
请参阅附件图像。我已经在标签渲染代码中加入了反冲突例程的 。我是 ，附上修改过的插件的副本。请参阅第472-501行, 特别是新函数getPositions（）和comparePositions（）。 这部分基于ŠimeVidas的DOM元素碰撞检测 代码。像这样的东西可能是库 库的一个很好的补充。

长话短说：

label.css('left', labelLeft);

：

1. 在jquery.flot.pie.js和包含行后

添加以下代码：

// 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); 

添加以下drawLabels()和完成的操作：

var labels = [];

Answer 2

你可以尝试有一定比例下隐藏一些标签：

pie: { 
    label: { 
     threshold: 0.1 
    } 
} 

通过马歇尔莱格特查看http://people.iola.dk/olau/flot/examples/pie.html