javascript - 我如何在 Highcharts Grouped Categories 中包装标签文本

Question

我可以包装我的标签文本或增加单元格高度以使其具有响应性吗？这是我的 jsfiddle .

see the label overlapping here

html:

<div id="container" class="chart-container"></div>

j查询:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "column",
            marginLeft: 85,
            marginRight: 15
        },
        title: {
            useHTML: true,
            x: 10,
            y: 80,
            text: ''
        },
        series: [{
            data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
        }],
        xAxis: {
            style:{
                overflow: 'none',
                crop : false
            },
            min:0,
            opposite:true,
            labels: {
                style: {
                    textOverflow: 'none',
                    whiteSpace: 'nowrap',
                    color: '#000000',
                    fontSize: '11px',
                    overflow: 'none',
                    crop : false,
                },
                gridLineWidth: 1,
                groupedOptions: [ {
                        rotation: 0, // rotate labels for a 2nd-level
                        y:10,
                    }],
                rotation: -90 // 0-level options aren't changed, use them as always
            },
            categories: [{
                name: "Fruiqweqw ewqeqwet",
                categories: ["Appleasd asdadd", "Bananaasd asdsa", "Orange asdad"]
                }, {
                name: "Vegetableasdasd",
                categories: ["Carrot asd", "Potato sdf", "Tomato"]
                }, {
                name: "Fishqwewewqewq",
                categories: ["Codasdsa", "Salmonasd", "Tuna"]
            }]
        }
    });
});

x 轴上的标签超出了给定的空间。有什么方法可以在不固定宽度的情况下做到这一点，因为我在实际元素中有很多标签？

Answer 1

好的，我明白了

style: {
          width: 10
        }

固定宽度会固定它在这里检查 http://jsfiddle.net/q0kns5av/