Question

如何防止标签在Highcharts样式模式下换行？我找到的部分解决方案是使用useHTML标志并设置white-space：nowrap;使用css，但随后标签将呈现在工具提示的顶部。如果我将useHTML设置为false，则highcharts会自动添加换行符。我已经包含了一个代码片段来说明问题。只需运行代码段并将鼠标悬停在底栏上即可。

＆＃13;

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        borderWidth: 1
    },

    title: {
        text: 'No space reserved for X axis labels'
    },

    credits: {
        enabled: false
    },

    legend: {
        enabled: false
    },

    xAxis: {
        categories: ['Product 1', 'Product 2', 'Yet another product with a long label'],
        labels: {
            rotation: 0,
            align: 'left',
            reserveSpace: false,
            x: 2,
            y: -5,
            useHTML: true
        },
        tickWidth: 0
    },

    series: [{
        data: [39.9, 71.5, 50.4],
        dataLabels: {
            enabled: true
        }
    }]
});

＆＃13;

@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-axis-labels span {
  white-space: nowrap!important;
}

＆＃13;

<script src="https://code.highcharts.com/js/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500px"></div>

＆＃13;

Answer 1

要使其与样式版的Highcharts一起使用，您可以包装addLabel原型的Tick函数。看一下下面的例子。

例：
http://jsfiddle.net/vsy8abLb/

在Highcharts样式模式中

1 个答案: