Кто-нибудь знает, как можно установить метку или заголовок оси в Flot?
Я читал API, но у него, похоже, нет этой функции...
Спасибо:)
Кто-нибудь знает, как можно установить метку или заголовок оси в Flot?
Я читал API, но у него, похоже, нет этой функции...
Спасибо:)
Нет никаких встроенных в флот.
Лучше всего сделать это самостоятельно через позиционированные divs, но если вы предприимчивы, вы можете посмотреть issue (или оригинал issue) и посмотреть, как другие люди справились с ним.
В частности, есть два человека, которые недавно сделали изменения, связанные с ярлыками:
https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js
Я использую этот обходной путь:
yaxis: {
tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(2) : "CZK/l";}
}
Очень просто, максимальное значение на оси Y заменяется пользовательской строкой. Я не тестировал на оси X, но я не вижу причин, почему это не должно работать.
Бесстыдная собственная розетка: я исправил и значительно расширил плагин с плавающей запятой Xuanluo: http://github.com/markrcote/flot-axislabels/ Насколько я знаю, это лучшее решение для меток оси в данный момент.
Предложение, которое я видел, очень хорошо работает, чтобы поместить график в середину таблицы 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>
jqPlot поддерживает это, если вы можете использовать альтернативный
У этого есть исправления для использования нескольких осей, и смещение тоже хорошо работает... https://github.com/mikeslim7/flot-axislabels
Пример для графика 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;
}
$("<div class='axisLabel yaxisLabel'></div>")
.text("Pressure")
.appendTo($("#yl_1"));
Это тоже будет работать.