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轴标签的最大宽度，将其设置为父级的最小宽度（如下所示），并使标签无效以触发重绘。也许你可以找到一种方法来做到这一点。

如果一切都失败了，你可以＆＃34;作弊＆＃34;这些快速解决方案：

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

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

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

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

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

1 个答案: