các nhãn chồng lên nhau trong biểu đồ hình tròn flot

Question

Tôi sử dụng jquery flot cho biểu đồ hình tròn của mình và tôi gặp sự cố khi chồng chéo các nhãn khi các biểu đồ hình tròn rất nhỏ. Có một giải pháp tốt cho việc đó không?

Biểu đồ hình tròn của tôi:

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 
      } 

Cảm ơn, Arshavski Alexander.

Answer 1

Một giải pháp từ các vấn đề mã Google Flot bằng Marshall Leggett (link) :

Tôi nhận thấy rằng có vẻ như phổ biến đối với nhãn bánh để chồng chéo trong các biểu đồ hình tròn nhỏ hơn khiến chúng không thể đọc được, đặc biệt nếu một vài lát có giá trị phần trăm nhỏ là . Đây là với plugin jquery.flot.pie.
Vui lòng xem hình ảnh đính kèm. Tôi đã làm việc xung quanh điều này với việc bổ sung của một thói quen chống va chạm trong mã hiển thị nhãn. Tôi cũng đang đính kèm bản sao của plugin đã sửa đổi. Xem dòng 472-501, đặc biệt là các hàm getPositions() và comparePositions() mới. Phần này dựa một phần vào phát hiện va chạm phần tử DOM của Šime Vidas ' mã. Một cái gì đó như thế này có thể là một bổ sung tốt đẹp cho chiếc bánh thư viện.

câu chuyện dài ngắn:

1. Trong jquery.flot.pie.js và sau dòng có chứa:

   label.css('left', labelLeft);

thêm đoạn mã sau:

// 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. Thêm dòng sau vào drawLabels() và bạn đang thực hiện:

   var labels = [];

Answer 2

bạn có thể thử ẩn một số các nhãn dưới một tỷ lệ nhất định:

pie: { 
    label: { 
     threshold: 0.1 
    } 
} 

Xem đồ thị/example 6 trên http://people.iola.dk/olau/flot/examples/pie.html