Question

我的极地堆积柱形图的图例被切断了，如下：

我该如何避免这种情况？

$('#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'

        },
    }
});

Answer 1

SVG中文本的流控制很难。增加图表和#container的使用会有所帮助。然而，这在设计中可能是不可能的。

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

还可以完成另一个hack，即设置useHTML: true并在字符串中注入空格字符。但是，这可能会弄乱格式化。

完成后，这是一个例子。 http://jsfiddle.net/vz8nR/1/

Highcharts极地堆积柱形图 - 传奇被切断

1 个答案: