是否可以在pieChart切片中添加图标?

时间:2019-09-11 08:10:18

标签: amcharts4

我想为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;
  };

以下是视觉结果: enter image description here

0 个答案:

没有答案