时间戳

首页 > 解决方案 > 如何避免odoo 10 nvd3饼图中的文本重叠

odoo - 如何避免odoo 10 nvd3饼图中的文本重叠

问题描述

我正在使用 odoo 10。当我转到树视图然后是图表时，然后单击饼图图标。饼图标签在某些点重叠。我尝试在 /web/static/nvd3/nv.d3.js 文件中解决一些问题，但它要么给我错误，要么给我带来影响。谁能帮助我如何在饼图上没有文本重叠的情况下实现这一目标？

/* 重叠的饼图标签不好。这试图做的是，防止重叠。每个标签位置都经过哈希处理，如果发生哈希冲突，我们假设有重叠。调整标签的 y 位置以消除重叠。*/ var center = labelsArc[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) 则标签在饼圈之外，但一些文本相互重叠。提前致谢！

标签： odoopie-chartodoo-10python-nvd3

解决方案

这对我有用。不要像我在问题中应用的那样应用 rotateLabels(-45) 。在 nv.d3.js 文件中设置 ShowLabels=true 和 labelSunbeamLayout=true 如下所示。

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

推荐阅读