Question

尝试在dimple.plot.pie

中显示甜甜圈图表上的百分比

以下是一些有效的代码，但将标签放在切片上。

无法使标签显示在饼外。

rings = chart.addSeries("series", dimple.plot.pie);
rings.afterDraw = function(shape, data) {
  var bbox, ctm;
  ctm = shape.getCTM();
  bbox = shape.getBBox();
  return this.chart.svg.append("text")
    .attr("x", ctm.e + bbox.x + bbox.width/2)
    .attr("y", ctm.f + bbox.y + bbox.height/2)
    .text(Math.round(1000*data.piePct)/10 + "%");;
};

这是我能做的最好的事情......

enter image description here

Answer 1

我想将它构建到dimple库中，但暂时，我在我自己的一个项目中使用的方法是：

function getCentroid(data, plot) {
    var centerX = plot.x + plot.width / 2,
        centerY = plot.y + plot.height / 2,
        angle = (data.startAngle + (data.endAngle - data.startAngle) / 2),
        hyp = (data.innerRadius + (data.outerRadius - data.innerRadius) / 2),
        opp = Math.sin(angle) * hyp,
        adj = Math.cos(angle) * hyp;
    return [centerX + opp, centerY - adj];
}

series.afterDraw = function (shape, data) {
    var ctd = getCentroid(data, plotSize),
        s = d3.select(shape),
        degrees = ((data.startAngle + (data.endAngle - data.startAngle) / 2) * 180) / Math.PI;
    if (degrees < 180) {
        degrees -= 90;
    } else {
        degrees += 90;
    }
    if (Math.abs(data.startAngle - data.endAngle) > 0.1) {
        chart._group.append("text")
            .attr("transform", "rotate(" + degrees + ", " + ctd[0] + ", " +  ctd[1] + 4 + ")")
            .attr("dy", "0.35em")
            .attr("x", ctd[0])
            .attr("y", ctd[1])
            .style("text-anchor", "middle")
            .style("pointer-events", "none")
            .text(format(data.pValue));
    }
};

我从我自己的代码中直接使用了这个，所以它依赖于范围内的一些变量，但希望它们是相当不言自明的。

Answer 2

2年后仍然没有开箱即用的解决方案？

以下解决方案是我在主题上找到的所有工作汇编。欢迎更新： - ）

var pies = chart.addSeries("series", dimple.plot.pie);
pies.radius = 60;
pies.innerRadius = "50%";
pies.afterDraw = function (shape, data) {
    var arc = d3.arc()
        .outerRadius(radius)
        .innerRadius(radius/2);

    var ctm = shape.getCTM();

    chart.svg.append("text")
    // Position text in the centre of the shape
        .attr("x", arc.centroid(data)[0])
        .attr("y", arc.centroid(data)[1])
        .attr("transform", function () {
            return "translate("+ctm.e+","+ctm.f+")";
        })
    // Centre align and nicer display
        .style("text-anchor", "middle")
        .style("font-size", "10px")
        .style("font-family", "sans-serif")
        .style("opacity", 0.8)
    // Prevent text cursor on hover and allow tooltips
        .style("pointer-events", "none")
    // Display text
        .text((data.piePct*100).toFixed(2) + "%)");
}

如何在Dimple.js甜甜圈或饼图上绘制标签？

2 个答案: