如何防止标签在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/