Flot中的轴标签答案

【问题标题】：Axis label in FlotFlot中的轴标签
【发布时间】：2011-04-06 08:10:23
【问题描述】：

有谁知道如何在 Flot 中设置轴的标签或标题？

我已经阅读了 API，但它似乎没有那个功能......

谢谢:)

【问题讨论】：

标签： javascript flot

【解决方案1】：

没有内置的浮动。

最好的办法是通过定位的 div 自己做，但如果你喜欢冒险，你可以看看 issue（或原来的 issue），看看其他人是如何处理它的。

具体来说，最近有两个人对flot做了标签相关的修改：

https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js

http://github.com/xuanluo/flot-axislabels

【讨论】：

我将尝试使用定位的 div。谢谢。
homepage 上的 y 轴标签就像这个答案所说的那样：通过仔细定位的 div。然而，version 0.9 of Flot will include axis labels.
感谢@MatthewWalker - 一旦 0.9 发布，我会更新我的答案
好。 ...它有效，但它也删除了我的自定义标签格式，所以不要去

【解决方案2】：

无耻自插：我修复并大大扩展了玄罗的flot-axislabels插件：http://github.com/markrcote/flot-axislabels/据我所知，是目前轴标签最好的解决方案。

【讨论】：

这对我有用，呜呼。我认为这可能是公认的答案
应该是公认的答案。集成很轻松
这绝对是正确的答案！谢谢。

【解决方案3】：

我正在使用这个解决方法：

yaxis: {
tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(2) : "CZK/l";}
}

很简单，将Y轴上的最大值替换为自定义字符串。我没有在 X 轴上进行过测试，但我看不出它为什么不能工作。

【讨论】：

遗憾的是它没有显示在我的身上，因为 Flot 决定隐藏图表中的最后一个（最大）刻度标记
toFixed(2) 的目的是什么？
@knocte 如果没有 toFixed(2)，您最终可能会在图表上看到这种情况：11.5000000004。不是很吸引人。

【解决方案4】：

我看到一个非常有效的建议是将图表放在 3x3 表格的中间。然后可以将标签放在其他单元格中。

<table style="text-align:center">
  <tr>
    <td></td>

    <td>Plot Title Goes Here</td>

    <td> </td>
  </tr>

  <tr>
    <td>Y Axis Label</td>

    <td>
      <div id="graph here" style="width:600px;height:300px"></div>
    </td>

    <td></td>
  </tr>

  <tr>
    <td></td>

    <td>X Axis Label Goes Here</td>

    <td></td>
  </tr>

</table>

【讨论】：

一个不错的解决方法。我认为对于 y 轴，也许使用图像，这样你就可以让它垂直。

【解决方案5】：

使用纯 css 解决的 2dims 图（x 和 y 轴）示例。

Y轴：

#placeholder:after {
    content: 'Speed';
    position: absolute;
    top: 50%;
    left: -50px;
    font-weight: 600;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

X 轴：

#placeholder:before {
    content: 'Time';
    position: absolute;
    bottom: -30px;
    left: 50%;
    font-weight: 600;
}

【讨论】：

为我工作谢谢

【解决方案6】：

jqPlot 对此提供支持，以防您可以使用替代方法

http://www.jqplot.com

【讨论】：

一个潜在的缺点是，Flot 仍然支持 IE6，而 jqPlot 已经放弃了它。
对于 Flot 来说，还有更好的平移和缩放方式。 This 比 that 更直观。

【解决方案7】：

这个修复了使用多个轴的问题，并且偏移量也很好......https://github.com/mikeslim7/flot-axislabels

【讨论】：

【解决方案8】：

$("<div class='axisLabel yaxisLabel'></div>")
        .text("Pressure")
        .appendTo($("#yl_1"));

这也可以。

【讨论】：

【解决方案9】：

我使用 szpapas 的想法。

我在它下面添加了更多的 jquery 代码来覆盖这样的 x 轴。

            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(1)').html("Berhad")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(2)').html("")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(3)').html("Sdn Bhd")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(4)').html("")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(5)').html("Enterprise")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(6)').html("")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(7)').html("Koperasi")

【讨论】：