PieChart上方和下方的AmCharts4标签

Question

我现在正试着用AmCharts4画一些漂亮的PieCharts。

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

我在谷歌上搜索，并试图在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;

​

​