饼图上方和下方的 AmCharts 4 标签

Question

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

问题是我的数据集中有很多不同的小数据，这导致了很多标签。 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;

饼图上方和下方的 AmCharts 4 标签

AmCharts4 labels above and below a PieChart

javascript

charts

label

amcharts

amcharts4

选项#1

选项 #2

选项#3