尝试在dimple.plot.pie
的甜甜圈图上正确显示百分比
这是一些可以工作的代码,但是将标签直接放在 slice 上。
无法使标签显示在饼图外部。
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 + "%");;
};
这是我能做的最好的..
最佳答案
我想将其构建到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));
}
};
我直接从自己的代码中获取了该代码,因此它依赖于范围内的一些变量,但希望它们是不言而喻的。
关于dimple.js - 如何在Dimple.js甜甜圈或饼图上绘制标签?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28306308/