我制作了一个饼图,每个切片内都有图标。我想弄清楚如何正确地将它们居中?
图标将插入图像元素中。也许这是错误的方法
google.visualization.events.addListener(chart, "ready", function() {
var layout = chart.getChartLayoutInterface();
var boundsChart = layout.getChartAreaBoundingBox();
var labels = container.getElementsByTagName("text");
var g = container.getElementsByTagName("g");
Array.prototype.forEach.call(labels, function(label, index) {
// console.log(label, index);
if (label.getAttribute("fill") === "none") {
var bounds = label.getBBox();
var group = document.createElementNS(
"http://www.w3.org/2000/svg",
"g"
);
var img = document.createElementNS(
"http://www.w3.org/2000/svg",
"image"
);
img.setAttribute("x", "-17");
img.setAttribute("y", "-17");
img.setAttribute("width", "34");
img.setAttribute("height", "34");
img.setAttributeNS(
"http://www.w3.org/1999/xlink",
"href",
"http://findicons.com/files/icons/512/star_wars/32/clone_old.png"
);
var translate = "translate(" + bounds.x + "," + bounds.y + ")";
group.setAttribute(
"transform",
translate
);
group.appendChild(img);
label.parentNode.appendChild(group);
}
});
});
google.visualization.events.addListener(chart, "click", changetext);
chart.draw(data, options);
function changetext(e) {
var selectedItem = chart.getSelection();
}
});