javascript - Highchart 第一类别标签未换行

Question

我在 Highchart 中遇到类别标签问题，即图表的第一个类别标签未换行并且与第二个标签重叠，而其余标签显示正常。我在jsFiddle上做了一个demo，可以更好地解释:jsFiddle Demo。

我的代码如下:

HTML 代码:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="chartContainer" style="height: 400px"></div>

JavaScript 代码:

$(function () {
    $('#chartContainer').highcharts(
{
    plotOptions: 
    {
    },
    drilldown: 
    {
        series: 
        [
            {
                id: 'Drilldown_749_6',
                index: 0,
                name: 'Y-Axis Label',
                data: [
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 90000
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 710000
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: null
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 1740000
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 800000
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 800000
                    }]
            }
        ],
        drillUpButton: 
        {
            position: 
            {
                y: -3,
                x: -30
            },
            relativeTo: 'spacingBox'
        }
    },
    series: 
    [
        {
            id: 749,
            index: 0,
            visible: true,
            name: 'Y-Axis Label',
            data: [
                {
                    drilldown: 'Drilldown_749_6',
                    name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                    y: 4140000
                }]
        }
    ],
    yAxis: [
        {
            title: 
            {
                text: '<div class=\'ellipsis\' style=\'width:150px;text-align: center;\' title=\'Y-Axis Label\'>Y-Axis Label</div>',
                useHTML: true
            },
            max: 4140000,
            opposite: false,
            gridLineWidth: 1
        }],
    title: 
    {
        text: '<div  class=\'ellipsis\' style=\'width:650px;text-align: center;\' title=\'sdf\'>sdf</div>',
        useHTML: true
    },

    credits: 
    {
        enabled: false
    },
    chart: 
    {
        renderTo: 'chartContainer',
        events: 
        {
            drilldown: 
                function ()
                {
                    $('#chartContainer').highcharts().reflow();
                },
            drillup: 
                function ()
                {

                }
        },
        type: 'line'
    },
    xAxis: 
    {
        title: 
        {
            text: 'Category Axis Label',
            margin: 30
        },
        labels: 
        {
            autoRotation: [-20, -40, -80],
            padding: 10
        },
        categories: true,
        gridLineWidth: 1
    },
    exporting: 
    {
        enabled: true
    },
    lang: 
    {
        drillUpText: ' ◁ Back '
    },
    tooltip: 
    {
        pointFormatter: 
            function ()
            {
                var s = '<span style="color:'+this.series.color+'">●</span> '+this.series.name+': <b>'+this.y+'</b>';
                if(typeof this.seriesSettings != "undefined" && typeof this.seriesSettings.tooltipText != "undefined" && this.seriesSettings.tooltipText != "") s = s + ' ['+this.seriesSettings.tooltipText+']';
                return s;
            }
    }
});
});

Answer 1

尝试对 Xaxis 使用宽度和 useHtml 的这些更改。

xAxis: 
    {
         tickInterval: 1,
        title: 
        {
            text: 'Category Axis Label',
            margin: 10
        },
        labels: 
        {   
            autoRotation: [-20, -40, -80],
            padding: 0,
            style: {    
                width : '100px'
                },
            useHTML: true
        },
        categories: true,
        gridLineWidth: 1
    },

或者

您可以使用此解决方法

series: 
        [
            {
                id: 'Drilldown_749_6',
                index: 0,
                name: 'Y-Axis Label',
                data: [
                    {
                        name: ' ',
                        y: null
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 90000
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 710000
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: null
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 1740000
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 800000
                    },
                    {
                        name: 'Abc def ghi jkl mno pqr stu vwx yx 123 456 789 0',
                        y: 800000
                    }]
            }
        ],