Flot中的軸標籤

Question

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

我讀過的API，但它似乎不具備該功能...

謝謝:)

Answer 1

有沒有內置在海軍報。

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

具體來說，有誰最近製作好的標籤相關修訂海軍報兩個人：

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

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

Answer 2

jqPlot已經支持這一點，櫃面你能夠使用替代

http://www.jqplot.com

Answer 3

我使用這個workarou nd：

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

非常簡單，Y軸上的最大值被自定義字符串替代。我沒有在X軸上進行測試，但我沒有看到爲什麼它不起作用。

Answer 4

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

Answer 5

我看到一個很好的建議是把圖放在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 6

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

這將工作過。

Answer 7

這其中有修復用於使用多個軸和偏移效果很好太... https://github.com/mikeslim7/flot-axislabels

Answer 8

示例純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; 
} 

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