图 1
图 2
我想将标签左对齐,但是当我这样做时,标签会像Image 2一样堆叠在其他标签上。
请帮我
这个没有固定宽度的作品:
.highcharts-axis-labels span {
left: 0 !important;
}
由于它使用最大标签的宽度并通过提高“左”值移动较小的一次,您可以通过将其设置为 0 来防止这种情况发生。因此不需要固定宽度或“对齐:左”。
更新:
标签“useHTML”设置必须设置为true才能工作!
xAxis: {
labels: {
useHTML: true,
您还可以将 useHTML 设置为 true,对标签使用格式化程序,然后使用 CSS 样式。
http://api.highcharts.com/highcharts#xAxis.labels.useHTML http://api.highcharts.com/highcharts#xAxis.labels.formatter
编辑:
xAxis: {
labels: {
//align: 'center'
useHTML:true,
formatter:function(){
return '<div class="label">'+this.value+'</div>';
}
}
},
CSS
.label {
text-align:left;
width:60px;
}
给绿色和蓝色条一个容器 div/span。然后为标签和容器 span/div 申请一个 'display: inline-block' css。
通过这样做,您将强制条形图为标签“留出空间”。