PieChart上方和下方的AmCharts4标签

Question

我目前正在尝试使用AmCharts4绘制一些漂亮的PieCharts。

问题是我的数据集中有很多不同的数据，这导致了很多标签。 AmCharts4仅将标签在我的PieChart上左右对齐，这导致某些标签未显示。我不想隐藏任何标签。

我在Google上进行了搜索，并试图在amcharts文档中找到某事，但除了这个示例https://www.codeseek.co/EpicVisionStudio/simple-pie-chart-GroyYx?lang=es之外，我找不到其他有用的东西。这正是我所需要的，但是它基于amcharts3，并且我想使用amcharts4，但是我无法迁移该示例。

这是我在AmCharts4上尝试过的代码：

am4core.ready(() => {
                // Themes begin
                am4core.useTheme(am4themes_material);
                am4core.useTheme(am4themes_animated);
                // Themes end

                // Create chart instance
                const chart = am4core.create('chartdiv', am4charts.PieChart);
                // Add data
                // chart.data = this.portfolioSecurityData;
                chart.data = [
                    {
                        country: 'Account Status',
                        litres: 501.9,
                    },
                    {
                        country: 'Random Safety',
                        litres: 301.9,
                    },
                    {
                        country: 'IFTA',
                        litres: 201.1,
                    },
                    {
                        country: 'Vehicle Registration',
                        litres: 165.8,
                    },
                    {
                        country: 'All Trucks In',
                        litres: 139.9,
                    },
                    {
                        country: 'Tandem Weight',
                        litres: 128.3,
                    },
                    {
                        country: 'Site Random',
                        litres: 99,
                    },
                    {
                        country: 'No WIM',
                        litres: 60,
                    },
                    {
                        country: 'more data 1',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                ];
                chart.exporting.menu = new am4core.ExportMenu();
                // Set inner radius
                chart.innerRadius = am4core.percent(50);
                chart.radius = am4core.percent(80);

                // Add and configure Series
                const 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;

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

                pieSeries.labels.template.fontSize = 12;

我拍了两张照片：

My Amcharts4 result

Good Amcharts3 Example

Answer 1

您在这里有一些选择。

选项＃1

减少标签的填充，使它们更紧密地包装在一起：

pieSeries.labels.template.padding(1, 1, 1, 1);

选项＃2

未对齐标签（例如在V3中）：

pieSeries.alignLabels = false;

选项＃3

使用官方Slice Grouper插件对小切片进行分组。

var grouper = pieSeries.plugins.push(new am4plugins_sliceGrouper.SliceGrouper());
grouper.clickBehavior = "break";
grouper.threshold = 3;