highcharts - 左对齐多类别 xaxis highchart

Question

图 1

图 2

我想将标签左对齐，但是当我这样做时，标签会像Image 2一样堆叠在其他标签上。

请帮我

Answer 1

这个没有固定宽度的作品：

.highcharts-axis-labels span {
  left: 0 !important;
}

由于它使用最大标签的宽度并通过提高“左”值移动较小的一次，您可以通过将其设置为 0 来防止这种情况发生。因此不需要固定宽度或“对齐：左”。

更新：

标签“useHTML”设置必须设置为true才能工作！

xAxis: {
  labels: {
    useHTML: true,

Answer 2

您还可以将 useHTML 设置为 true，对标签使用格式化程序，然后使用 CSS 样式。

http://api.highcharts.com/highcharts#xAxis.labels.useHTML http://api.highcharts.com/highcharts#xAxis.labels.formatter

编辑：

http://jsfiddle.net/2QREQ/3/

xAxis: {

            labels: {
                //align: 'center'
                useHTML:true,
                formatter:function(){

                    return '<div class="label">'+this.value+'</div>';
                }
            }
        },

CSS

.label {
text-align:left;
width:60px;

}

Answer 3

给绿色和蓝色条一个容器 div/span。然后为标签和容器 span/div 申请一个 'display: inline-block' css。

通过这样做，您将强制条形图为标签“留出空间”。