防止标签文本在 Highcharts 样式模式下换行答案

【问题标题】：Prevent label text wrapping in Highcharts styled mode防止标签文本在 Highcharts 样式模式下换行
【发布时间】：2017-09-30 20:06:05
【问题描述】：

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

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
        }
    }]
});

@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-axis-labels span {
  white-space: nowrap!important;
}

<script src="https://code.highcharts.com/js/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500px"></div>

【问题讨论】：

标签： highcharts

【解决方案1】：

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

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

【讨论】：