1

the legend of my polar stacked column chart is cut off, like this:

http://jsfiddle.net/vz8nR/

How can i avoid this?

$('#container').highcharts({
    series: [
        {
            name: 'someCategory #1',
            data: [12, 13, 14, 15, 5, 17]
        },
        {
            name: 'someCategory #2',
            data: [13, 15, 4, 12, 14, 16]
        },
        {
            name: 'someCategory #3',
            data: [1, 15, 13, 4, 14, 30]
        },
        {
            name: 'someCategory #4',
            data: [13, 15, 3, 12, 1, 16]
        }
    ],

    chart: {
        polar: true,
        type: 'column',
        borderWidth: 0,
        backgroundColor: 'transparent',
        plotBackgroundColor: 'transparent',
        plotBorderWidth: 0,
        width: 275,
        height: 300
    },

    title: {
        text: ''
    },

    subtitle: {
        text: ''
    },
    legend: {
        enabled: false,
    },
    xAxis: {
        categories: ['thisisalong name', 'yetanotherreallylong name', 'i dont even know what to write', 'hmletsthinkofsomething', 'stillnonamethought of', 'thisisthelastone'],
    },

    yAxis: {
        min: 0,
        endOnTick: false,

        showLastLabel: true,
        labels: {
            formatter: function () {
                return this.value + '%';
            }
        }
    },

    tooltip: {
        valueSuffix: '%',
        followPointer: true
    },

    plotOptions: {
        series: {
            stacking: 'normal',
            shadow: false,
            groupPadding: 0,
            pointPlacement: 'on'

        },
    }
});
4

1 に答える 1

0

SVG:s 内のテキストのフロー制御は困難です。グラフの値を大きくすると#container役立ちます。ただし、これは設計上不可能な場合があります。

それが不可能な場合は、javascript を使用して単語をformater関数で分割します。単語を長く分割する場合は、各単語をチェックします。とalongwordなりalong- wordます。

実行できる別のハックもありuseHTML: trueます。それは、長すぎる文字列にスペース文字を設定して挿入することです。ただし、これによりフォーマットが台無しになる可能性があります。

これが行われたときの例です。 http://jsfiddle.net/vz8nR/1/

于 2013-09-09T12:12:20.937 に答える