Question

尝试将文本标签置于flot中xaxis下的条形图下方来自flot的原始标记看起来像这样：

<div style="position: absolute; text-align: center; left: -20px; top: 185px; width: 79px;" class="tickLabel"><span class="chart-label">Lorem</span></div>

我希望生成的标签标记如下所示：

<div style="position: absolute; text-align: center; left: 0px; top: 185px; width: 79px;" class="tickLabel"><span class="chart-label">Lorem</span></div>

到目前为止，这段代码已经完成了这个技巧，但我想知道是否有更好的方法来对齐标签。

$.each($('.chart-label'),function(idx,el){
 var c = $(el);
 var value = c.parent().css('left');
 c.parent().css('left',parseInt(value)+20+'px');
});

我无法覆盖css中的展示位置，因为left属性是内联的。

Answer 1

你可以单独使用CSS：

.tickLabel .chart-label { padding-left:20px }

或者这是对你的一个小改进：

$('.tickLabel').each(function(){
  var me = $(this);
  me.css('left',parseInt(me.css('left'))+20+'px');
});

在flot中移动xaxis标签

1 个答案: