我想为PieChart中的每个切片添加一个特定的图标。 我可以做到,但在将图标对齐到它们对应的切片时遇到麻烦。它们在饼图的中间对齐 这是我的饼图的声明。
const buildPieChart = container => {
const menuRefData = [
{
action: 'Valorisation',
weight: 90,
image: ValorisationIcon,
},
{
action: 'Enfant',
weight: 90,
image: ListIcon,
},
];
const points: am4core.IPoint = {
x: -(container.contentWidth + 150) / 2,
y: -(container.contentWidth + 150) / 2,
};
menuRef.current = container.createChild(am4chart.PieChart);
menuRef.current.data = menuRefData;
menuRef.current.isMeasured = false;
menuRef.current.width = container.contentWidth + 150;
menuRef.current.height = container.contentWidth + 150;
menuRef.current.moveTo(points);
// menuRef.current.toBack();
menuRef.current.isMeasured = false;
/**
* MenuSeries (PieSeries)
*/
const menuSeries = menuRef.current.series.push(new am4chart.PieSeries());
menuSeries.dataFields.value = 'weight';
menuSeries.alignLabels = false;
menuSeries.hiddenState.properties.endAngle = -90;
menuSeries.slices.template.togglable = true;
menuSeries.slices.template.strokeWidth = 2;
menuSeries.slices.template.strokeOpacity = 1;
menuSeries.slices.template.tooltipText = '';
menuSeries.labels.template.text = '';
menuSeries.labels.template.fontSize = 20;
menuSeries.labels.template.bent = true;
menuSeries.labels.template.radius = -10;
menuSeries.labels.template.padding(0, 0, 0, 0);
menuSeries.ticks.template.disabled = true;
const icon: am4core.Image = menuSeries.slices.template.createChild(
am4core.Image
);
icon.propertyFields.href = 'image';
icon.horizontalCenter = 'left';
icon.verticalCenter = 'top';
icon.width = 40;
icon.height = 40;
};