当标签较长时，高图表条形图标签与图表重叠

Question

我需要xAxis标签有一个工具提示。但是当我使用格式化工具添加工具提示时，长标签往往会与图表重叠，而不是向右推。此外，只有当标签有一个空格时才会发生这种情况，如果删除了空格，它就会正常工作并将图表向右推。这个问题显示在这个小提琴中：http://jsfiddle.net/W5wag/44

$(function(){
    var chart1;
    $(document).ready(function(){
    var options = {
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        xAxis: {
            categories: ['cat1aaaaaaaaaaaaaaaasadadadad adadaaaaaaaaaaaaaaaaaaaaa', 'cat2', 'cat3', 'cat4', 'cat5'],
            labels: {
                formatter: function() {
                    return '<span title="abc">' + this.value + '</span>';
                },
                useHTML: true,
                style: {
                    whiteSpace: 'nowrap'
            }
        },
      },

    };

    options.series = [{
            data: [3, 4, 4, 3, 9]
        }];
    chart1 = new Highcharts.Chart(options);
    });
})

Answer 1

我试图在呈现标签之后执行一些代码，但我的经验有点局限于此。我会尝试找到任何x轴标签的最大宽度，将其设置为父标签的最小宽度(如下所示)，并使标签无效以触发重绘。也许你可以找到一种方法来做到这一点。

如果所有其他方法都失败了，你可以用这些快速解决方案“作弊”：

设置不带空格的文本，并在布局完成后添加它们。

 window.setTimeout(()=>document.querySelector('span[title=abc]')
                     .innerHTML='cat1aaaaaaaaaaaaaaaasadadad adadadaaaaaaaaaaaaaaaaaaaaa', 500);

或者，将css添加到页面(但这需要知道标签的宽度)：

.highcharts-axis-labels.highcharts-xaxis-labels > * { min-width: XXXpx }