Javascript Flot 中的轴标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5563270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Axis label in Flot
提问by Nobita
Does anyone know how one can set the label or title of an axis in Flot?
有谁知道如何在 Flot 中设置轴的标签或标题？
I've read the API but it doesn't seem to have that feature...
我已经阅读了 API，但它似乎没有那个功能......
Thanks :)
谢谢 ：）
采纳答案by Ryley
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 issue(Or the original issue) and see how other people have dealt with it.
最好的办法是通过定位的 div 自己做，但如果你喜欢冒险，你可以查看问题（或原始问题），看看其他人是如何处理的。
Specifically, there are two people who have recently made label-related revisions to flot:
具体来说，最近有两个人对flot做了标签相关的修改：
https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js
https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js
回答by Mishami
i'm using this workaround:
我正在使用此解决方法：
yaxis: {
tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(2) : "CZK/l";}
}
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.
很简单，Y 轴上的最大值由自定义字符串替换。我没有在 X 轴上进行过测试，但我看不出它不应该工作的原因。
回答by Mark
Shameless self-plug: I fixed and greatly extended xuanluo's flot-axislabels plugin: http://github.com/markrcote/flot-axislabels/As far as I know, it is the best solution for axis labels at the moment.
无耻的自插：我修复并大大扩展了xuanluo的flot-axislabels插件：http://github.com/markrcote/flot-axislabels/据我所知，这是目前轴标签的最佳解决方案。
回答by FluffyLlemon
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.
我认为效果很好的一个建议是将图形放在 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>
回答by izupet
Example for 2dims graph (x and y axis) solved with pure css.
使用纯 css 解决的 2dims 图（x 和 y 轴）示例。
Y axis:
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 axis:
X轴：
#placeholder:before {
content: 'Time';
position: absolute;
bottom: -30px;
left: 50%;
font-weight: 600;
}
回答by Muers
jqPlot has support for this, incase you're able to use an alternative
jqPlot 对此提供支持，以防您可以使用替代方案
回答by ATOzTOA
This one has fixes for using multiple axes and the offset works well too... https://github.com/mikeslim7/flot-axislabels
这个修复了使用多个轴的问题，偏移也很好用...... https://github.com/mikeslim7/flot-axislabels
回答by Apit John Ismail
I use szpapas idea.
我使用 szpapas 的想法。
I added more jquery code below it to overwrite x-axis like this.
我在它下面添加了更多的 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")
回答by szpapas
$("<div class='axisLabel yaxisLabel'></div>")
.text("Pressure")
.appendTo($("#yl_1"));
This will works too.
这也会起作用。
