动态图表的图表大小的动态变化

Question

我用Highcharts制作的图表大小有问题。 为了更好地理解，我附上了当前情况的屏幕截图。 我希望所有饼的大小都相同，并且应该水平对齐。 由于这些值是动态的，因此我不能仅仅通过试算法将图表容器的高度设置为正确的大小。

这是一张图表和相关容器的代码：

var auftrag;
$(document).ready(function() {
    auftrag = new Highcharts.Chart({
        chart: {
            renderTo: 'angebot-container',
            height: 400,
            plotBackgroundColor: '#f5f5f5',
            backgroundColor: '#f5f5f5',
            plotBorderWidth: null,
            plotShadow: false
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 0, ',', '.') +' €';

            },
            positioner: function () {
                return { x: 3, y: 40 };
            }
        },
        legend: {
            layout: 'vertical'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '',
            data: [
                <?php
                foreach ($offerPie as $offer) {
                    echo '[\'' . utf8_encode(shorten_word($offer['company'], 20, '...')) . '\', ' . $offer['summe'] . '],';
                }
                ?>
            ]
        }]
    });
});

这是容器的标记：

<div class="chart" id="angebot-container" style="min-width: 250px; margin: 0 auto"></div>

我尝试了几件事，但我什至没有达到我想要的。 问题在于，图例中的项目可以更改，并且图例的高度会更改实际饼图的高度和宽度。

Answer 1

如何移动您的图例？

...
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    y: 100
},
...

演示