Подтвердить что ты не робот

Перекрывающиеся метки в круговой диаграмме

Я использую 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 
            }

Спасибо, Аршавский Александр.

Ответ 1

Решение проблем с кодом Flot Google с помощью Marshall Leggett (ссылка):

Я обнаружил, что кажется, что для ярлыков пика для общих совпаденийкруговые диаграммы, делающие их нечитаемыми, особенно если несколько небольшие процентные значения. Это с плагином jquery.flot.pie.
См. Прикрепленные изображения. Я работал над этим с добавлением процедуры противодействия столкновениям в коде рендеринга метки. я добавив копию пересмотренного плагина. См. Строки 472-501, особенно новые функции getPositions() и comparePositions(). Это частично основано на обнаружении DOM-элементов Šime Vidas DOM код. Что-то вроде этого может быть хорошим дополнением к пирогу библиотека.

длинный рассказ короткий:

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

Добавьте в drawLabels() следующее:

var labels = [];

Ответ 2

вы можете попытаться скрыть некоторые метки под определенным процентом:

pie: { 
    label: {
         threshold: 0.1
    }
}

См. график/пример 6 на http://people.iola.dk/olau/flot/examples/pie.html