Как избежать наложения текста в круговой диаграмме odoo 10 nvd3 - PullRequest
Новая
       21

Как избежать наложения текста в круговой диаграмме odoo 10 nvd3

0 голосов
/ 05 января 2019

Я использую odoo 10. Когда я перехожу к древовидному представлению, тогда диаграммы, затем нажимают на значок круговой диаграммы. Пироговые метки частично совпадают. Я попытался немного обойти в файле /web/static/nvd3/nv.d3.js, но это либо дает мне ошибки, либо n-эффект. Может ли кто-нибудь помочь мне, как добиться этого без перекрытия текста на круговой диаграмме?

/ * Накладывающиеся круговые метки не годятся. Это пытается предотвратить дублирование. Каждое местоположение метки хешируется, и если происходит коллизия хеша, мы предполагаем перекрытие. Отрегулируйте положение y этикетки, чтобы устранить наложение. * / var center = tagsArc [i] .centroid (d); 

var percent = getSlicePercentage(d);
if (d.value && percent >= labelThreshold) {
    var hashKey = createHashKey(center);
if (labelLocationHash[hashKey]) {
    center[1] -= avgHeight;
}
labelLocationHash[createHashKey(center)] = true;
}


return 'translate(' + center + ').rotateLabels(-45)'
}

Выше кода, дающего мне все текстовые метки, центрированные по центру / центру круговой диаграммы, перекрывающиеся друг с другом. если я удаляю .rotateLabels (-45), тогда метки находятся за пределами кругового круга, но некоторые тексты накладываются друг на друга. Заранее спасибо!

1 Ответ

0 голосов
/ 05 января 2019

Это сработало для меня. Не применяйте rotateLabels (-45), как я применил в вопросе. установите ShowLabels = true и labelSunbeamLayout = true, как показано ниже в файле nv.d3.js. 

//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------

var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 500
    , height = 500
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
    , container = null
    , color = nv.utils.defaultColor()
    , valueFormat = d3.format(',.2f')
    , showLabels = true
    , labelsOutside = true
    , labelType = "key"
    , labelThreshold = .02 //if slice percentage is under this, don't show label
    , donut = false
    , title = false
    , growOnHover = true
    , titleOffset = 0
    , labelSunbeamLayout = true
    , startAngle = false
    , padAngle = false
    , endAngle = false
    , cornerRadius = 0
    , donutRatio = 0.5
    , arcsRadius = []
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
    ;
...