Flot中的軸標簽

Question

有誰知道如何在Flot中設置軸的標簽或標題？

我已經閱讀了API，但它似乎沒有這個功能......

謝謝 ：）

Answer 1

沒有內置的flot。

你最好的選擇是通過定位的div自己做，但如果你喜歡冒險，你可以看看問題 （或原始問題 ），看看其他人如何處理它。

具體來說，有兩個人最近對flot進行了與標簽相關的修訂：

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

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

Answer 2

我正在使用此解決方法：

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

很簡單，Y軸上的最大值被自定義字符串替換。 我沒有在X軸上進行測試，但我認為沒有理由不應該這樣做。

Answer 3

無恥的自我插件：我修復並大大擴展了xuanluo的flot-axislabels插件： http ：//github.com/markrcote/flot-axislabels/據我所知，它是目前軸標簽的最佳解決方案。

Answer 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>

Answer 5

2dims圖（x和y軸）的示例用純css求解。

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;
}

Answer 6

這個有修復使用多個軸，偏移效果也很好... https://github.com/mikeslim7/flot-axislabels

Answer 7

jqPlot支持這個，因為你可以使用替代方案

http://www.jqplot.com

Answer 8

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

這也有效。

Answer 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")