删除饼图图例中名称和百分比之间的空格 (amcharts4)

Posted 2023-02-16

【中文标题】删除饼图图例中名称和百分比之间的空格 (amcharts4)

【英文标题】：Remove space between name and percentage in pie chart legend (amcharts4)

【发布时间】：2019-08-28 17:46:04

【问题描述】：

我想去掉图例中名称和百分比之间的空格。在图片中，我用黄色突出显示了空间。

例如，我希望第一个图例项是“立陶宛 (30.5%)”。 “立陶宛”和“30.5%”之间的额外空格破坏了我的 UI。

我的图例代码如下：

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;
pieSeries.ticks.template.disabled = true;
pieSeries.labels.template.disabled = true;

// This creates initial animation
pieSeries.hiddenState.properties.opacity = 1;
pieSeries.hiddenState.properties.endAngle = -90;
pieSeries.hiddenState.properties.startAngle = -90;

pieSeries.legendSettings.labelText = 'category';
pieSeries.legendSettings.valueText = null;
pieSeries.labels.template.text = "category: value";
pieSeries.slices.template.tooltipText = "category: value";

chart.legend = new am4charts.Legend();
chart.legend.fontSize = 5;
chart.legend.markers.template.width = 5;
chart.legend.markers.template.height = 5;

我必须做出哪些改变才能完成这项工作？

【参考方案1】：

您可以将值移动到"labelText"：

pieSeries.legendSettings.labelText = "category: value.percent.formatNumber('#.0')%";

并完全禁用值标签：

chart.legend.valueLabels.template.disabled = true;