Flot

Question

我有一个带有负值和正值的 Flot 条形图，这样我就可以使图表看起来像龙卷风图（一些棘手的方法），然后问题是，我无法设置 yaxis 标签位置到图表中间。

这是我的代码的示例代码：http://fiddle.jshell.net/ha2egeuk/31/

这是我用来在中心制作它的简单代码：

.flot-y-axis  > .tickLabel{
  left: 277px !important;
}

问题是，我将其设置为静态。如何让它自动居中？

Answer 1

试试这个 CSS。

.flot-y-axis  > .tickLabel { left:45% !important; }

Answer 2

要使 canvas 内的 y 轴标签居中，您可以使用如下方法：

.flot-y-axis  > .tickLabel{
    left: calc(50% - 50px) !important;
    text-align: center !important;
    width: 100px; // set to a size large enought for all labels ans use half of this in the calculation for the left option
}

这里更新了 fiddle 以上样式：http://fiddle.jshell.net/ha2egeuk/32/

fiddle 的问题是图表没有使用 canvas 的整个宽度（与图表本身不同，它从 window 的左侧开始） .所以标签在 canvas 内居中，但不在图表中。

我还没有找到造成这种差异的原因。但是当你有一个填满 canvas 的图表时，上述解决方案将起作用。

Answer 3

在我的例子中，我只有一个 canvas，没有额外的 css 类可以使用。

解决方法：

yaxis: {
  tickLength: 10,
  tickColor: '#fff'
}

Flot - 如何使yaxis标签位置在水平条形图的中间？

Flot - How to make yaxis label position in the middle of the horizontal bar chart?

javascript

css

jquery