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

Question

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

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

以下是我在中心使用的简单代码：

<div id="LoginPannel">
  <asp:Button ID="Button1" runat="server" Text="Login" OnClick="Button1_Click1" />
  <asp:Label ID="Label1" runat="server" Text="Username" Font-Bold="True"></asp:Label>
  <asp:Label ID="Label2" runat="server" Text="Password" Font-Bold="True"></asp:Label>
  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
  <asp:Label ID="Label3" runat="server" Text="Login"></asp:Label>
  <asp:Button ID="Button3" runat="server" Text="Having Problems?" OnClick="Button3_Click" />


</div>

<div id="topForm">


</div>

问题是，我把它设置为静态。如何让它成为汽车中心？

Answer 1

试试这个CSS。

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

Answer 2

要将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
}

这里是上述风格的更新小提琴：http://fiddle.jshell.net/ha2egeuk/32/

小提琴中的问题是图表没有使用画布的整个宽度（从窗口的左侧开始，与图表本身不同）。因此标签在画布内居中，但不在图表中。

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

Answer 3

在我的情况下，我只有一个画布，没有额外的css类可以使用。

解决它：

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