0

Highchartsで作成したチャートのサイズに問題があります。理解を深めるために、現在の状況のスクリーンショットを添付しました。すべてのパイが実際には同じサイズであり、水平方向に配置されている必要があります。値は動的であるため、試行錯誤によってチャートコンテナの高さを正しいサイズに設定することはできません。

1つのチャートと関連するコンテナのコー​​ドは次のとおりです。

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>

私はいくつかのことを試みましたが、私は自分が望むものにさえ近づきませんでした。問題は、凡例のアイテムが変更される可能性があり、凡例の高さが実際の円の高さと幅を変更することです。

これが現在の様子です

4

1 に答える 1

0

あなたの伝説を動かしてみませんか？

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

デモ

于 2012-07-27T01:41:35.797 に答える