blocks|key|941886|text|没有内置的flot。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|941887|您最好的选择是通过定位的issue自己完成，但如果您喜欢冒险，可以查看issue+(或最初的div)，看看其他人是如何处理它的。|offset|length|941888|具体地说，有两个人最近对flot进行了标签相关的修改：|941889|https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js|941890|http://github.com/xuanluo/flot-axislabels|941891|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/flot/issues/detail?id=42|1|https://github.com/flot/flot/issues/121|2|3^0|0|C|5|0|Z|5|1|0|0|0|23|2|0|0|15|3|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]|$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|L|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]|V|$5|O|P|Q|A|$R|I]]|W|$5|O|P|Q|A|$R|K]]]]

There are none built-in to flot.

Your best bet is to do it yourself via positioned divs, but if you are adventurous, you can look at the <a href="https://github.com/flot/flot/issues/121" rel="noreferrer">issue</a> (Or the original <a href="http://code.google.com/p/flot/issues/detail?id=42" rel="noreferrer">issue</a>) and see how other people have dealt with it.

Specifically, there are two people who have recently made label-related revisions to flot:

<a href="https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js" rel="noreferrer">https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js</a>

<a href="http://github.com/xuanluo/flot-axislabels" rel="noreferrer">http://github.com/xuanluo/flot-axislabels</a>

blocks|key|725957|text|不知羞耻的自插:我修复并大大扩展了宣洛的flot-axislabels插件：http://github.com/markrcote/flot-axislabels/据我所知，它是目前轴标签最好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|725958|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/markrcote/flot-axislabels/^0|12|18|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Shameless self-plug: I fixed and greatly extended xuanluo's flot-axislabels plugin: <a href="http://github.com/markrcote/flot-axislabels/" rel="noreferrer">http://github.com/markrcote/flot-axislabels/</a> As far as I know, it is the best solution for axis labels at the moment.

blocks|key|725912|text|我正在使用这个变通方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|725913|yaxis:+{
tickFormatter:+function(val,+axis)+{+return+val+<+axis.max+?+val.toFixed(2)+:+"CZK/l";}
}|code-block|syntax|javascript|725914|非常简单，Y轴上的最大值被替换为自定义字符串。我没有在X轴上测试过，但我看不出它为什么不能工作。|725915|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

i'm using this workaround:

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

Very simple, the max value on the Y axis is replaced by a custom string. I've not tested on the X axis, but I see no reason why it shouldn't work.

blocks|key|942074|text|我看到的一个非常有效的建议是将图表放在3x3表格的中间。然后，可以将标签放入其他单元格中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|942075|<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>|code-block|syntax|javascript|942076|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A suggestion I saw that works pretty well is to put the graph in the middle of a 3x3 table. Then the labels can be put in the others cells.

<pre><code>&lt;table style="text-align:center"&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;/td&gt;

 &lt;td&gt;Plot Title Goes Here&lt;/td&gt;

 &lt;td&gt; &lt;/td&gt;
 &lt;/tr&gt;

 &lt;tr&gt;
 &lt;td&gt;Y Axis Label&lt;/td&gt;

 &lt;td&gt;
 &lt;div id="graph here" style="width:600px;height:300px"&gt;&lt;/div&gt;
 &lt;/td&gt;

 &lt;td&gt;&lt;/td&gt;
 &lt;/tr&gt;

 &lt;tr&gt;
 &lt;td&gt;&lt;/td&gt;

 &lt;td&gt;X Axis Label Goes Here&lt;/td&gt;

 &lt;td&gt;&lt;/td&gt;
 &lt;/tr&gt;

&lt;/table&gt;
</code></pre>

blocks|key|726054|text|使用纯css解决二维图形(x和y轴)的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|726055|Y轴：|726056|#placeholder:after+{
++++content:+'Speed';
++++position:+absolute;
++++top:+50%25;
++++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);
}|code-block|syntax|javascript|726057|X轴：|726058|#placeholder:before+{
++++content:+'Time';
++++position:+absolute;
++++bottom:+-30px;
++++left:+50%25;
++++font-weight:+600;
}|726059|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Example for 2dims graph (x and y axis) solved with pure css.

Y axis:

<pre><code>#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);
}
</code></pre>

X axis:

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

blocks|key|725845|text|jqPlot对此提供了支持，以防您能够使用替代方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|725846|http://www.jqplot.com|offset|length|725847|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jqplot.com/^0|0|0|L|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

jqPlot has support for this, incase you're able to use an alternative

<a href="http://www.jqplot.com" rel="nofollow">http://www.jqplot.com</a>

blocks|key|726024|text|这一个有使用多个轴的修复，偏移也工作得很好…https://github.com/mikeslim7/flot-axislabels|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|726025|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mikeslim7/flot-axislabels^0|M|18|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This one has fixes for using multiple axes and the offset works well too... <a href="https://github.com/mikeslim7/flot-axislabels" rel="nofollow">https://github.com/mikeslim7/flot-axislabels</a>

blocks|key|942083|text|$("<div+class='axisLabel+yaxisLabel'></div>")
++++++++.text("Pressure")
++++++++.appendTo($("#yl_1"));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|942084|这也是可行的。|unstyled|942085|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

This will works too.

blocks|key|726092|text|我用的是szpapas的想法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|726093|我在它下面添加了更多的jquery代码来覆盖x轴，如下所示。|726094|++++++++++++$('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")|code-block|syntax|javascript|726095|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I use szpapas idea.

I added more jquery code below it to overwrite x-axis like this.

<pre><code> $('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")
</code></pre>

Does anyone know how one can set the label or title of an axis in Flot?

I've read the API but it doesn't seem to have that feature...

Thanks :)

Axis label in Flot

有人知道如何在Flot中设置轴的标签或标题吗？我已经阅读了API，但它似乎没有那个功能……谢谢:)

问Flot中的轴标签
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flot中的轴标签EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flot中的轴标签
EN