左对齐多类别X轴highchart

图片1左对齐多类别X轴highchart

enter image description here

图片2

enter image description here

我想左对齐的标签但是当我做这，标签一个st ack on other like 图片2。

请帮我

来源

2013-03-18 h2n2102

您也可以将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;

}

来源

2013-03-18 10:51:56

我曾经使用过useHTML和格式化程序，但它不起作用:( – h2n2102 2013-03-19 01:54:36

@ h2n2102请看更新后的答案 – 2013-03-19 09:22:24

感谢您的帮助，我现在可以做到，但是我的分类文本长度超过60px，我想设置它的宽度是自动的，但是当我设置自动，它确实再次对齐:( – h2n2102 2013-03-20 01:46:08

给绿色和蓝色的酒吧一个容器格/跨度。然后申请标签和容器span/div a'display：inline-block'css。

通过这样做，您将强制酒吧'给标签的空间'。

来源

2013-03-18 09:51:14

标签堆叠在其他上，而不是标签上的图表堆栈。 – h2n2102 2013-03-19 01:55:47

这一个工作没有固定的宽度：

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

因为它使用的最大标签的宽度，并通过提高“左”值移动小一次，就可以防止通过设置将其固定为0。所以，不需要固定宽度或“对齐：离开”。

更新：

标签“useHTML”设置必须设置为true才能使用！

xAxis: { 
    labels: { 
    useHTML: true,

来源

2014-01-28 13:29:34 phlppn

左对齐多类别X轴highchart

回答

相关问题