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