防止标签文本包装在Highcharts样式模式下



如何防止标签在HighCharts样式模式下包装?我发现的部分解决方案是使用USEHTML标志并设置白空间:NowRap;使用CSS,但随后将标签呈现在工具提示的顶部。如果我将USEHTML设置为false,则HighCharts会自动添加线路断路。我包括了一个代码片段来说明问题。只需运行片段,然后将鼠标悬停在底部栏上即可。

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的样式版本一起使用,您可以将Tick原型的addLabel函数包装。看看下面的示例。

示例:
http://jsfiddle.net/vsy8ablb/

最新更新