删除饼图图例中名称和百分比之间的 space (amcharts4)
Remove space between name and percentage in pie chart legend (amcharts4)
我想删除名称和百分比之间的图例中的 space。在图片中,我用黄色突出显示了 space。
例如,我希望第一个图例项是 "Lithuania (30.5%)"。 "Lithuania" 和“30.5%”之间的额外 space 破坏了我的 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;
我必须做出什么改变才能完成这项工作?
您可以将值移动到 "labelText"
:
pieSeries.legendSettings.labelText = "{category}: {value.percent.formatNumber('#.0')}%";
并完全禁用值标签:
chart.legend.valueLabels.template.disabled = true;
我想删除名称和百分比之间的图例中的 space。在图片中,我用黄色突出显示了 space。
例如,我希望第一个图例项是 "Lithuania (30.5%)"。 "Lithuania" 和“30.5%”之间的额外 space 破坏了我的 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;
我必须做出什么改变才能完成这项工作?
您可以将值移动到 "labelText"
:
pieSeries.legendSettings.labelText = "{category}: {value.percent.formatNumber('#.0')}%";
并完全禁用值标签:
chart.legend.valueLabels.template.disabled = true;