1

我的极坐标堆积柱形图的图例被切断了，像这样：

http://jsfiddle.net/vz8nR/

我怎样才能避免这种情况？

$('#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 中文本的流控制很困难。增加图形的 with#container会有所帮助。然而，这在设计中可能是不可能的。

因此，如果这不可能，我会使用 javascript 将单词与formater函数分开。那就是检查每个单词，如果要长拆分单词。那就是alongword变成along- word。

还有另一种技巧可以做，那就是useHTML: true在过长的字符串中设置和注入一个空格字符。但是，这可能会弄乱格式。

这是完成后的示例。 http://jsfiddle.net/vz8nR/1/

于 2013-09-09T12:12:20.937 回答