Ярлыки AmCharts4 выше и ниже круговой диаграммы - PullRequest
Новая
       59

Ярлыки AmCharts4 выше и ниже круговой диаграммы

0 голосов
/ 27 октября 2019

В настоящее время я пытаюсь нарисовать несколько симпатичных PieCharts с AmCharts4.

Проблема в том, что в моем наборе данных много разных и маленьких данных, что приводит к большому количеству меток. AmCharts4 выравнивает метки только влево и вправо на моей круговой диаграмме, что приводит к тому, что некоторые метки не отображаются. Я не хочу скрывать ярлыки.

Я искал в 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;

Я связал две фотографии результатов:

Мои результаты Amcharts4

Пример хороших Amcharts3

1 Ответ

1 голос
/ 29 октября 2019

У вас есть несколько вариантов здесь.

Опция # 1

Уменьшение заполнения этикеток, чтобы они были более плотно упакованы: 

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

enter image description here

Опция # 2

Не выровнять метки (как в V3): 

pieSeries.alignLabels = false;

enter image description here

Опция # 3

Группировать маленькие кусочки, используя официальный плагин Slice Grouper . 

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

enter image description here

...