Метка оси во Флоте

Question

Кто-нибудь знает, как можно установить метку или название оси во Flot?

Я прочитал API, но, похоже, у него нет этой функции ...

Спасибо:)

Answer 1

Нет встроенных для флотации.

Лучше всего сделать это самостоятельно с помощью позиционированных дивов, но если вы любите приключения, вы можете посмотреть на выпуск (или на оригинальный выпуск ) и посмотреть, как другие люди с этим справились.

В частности, есть два человека, которые недавно внесли изменения, связанные с лейблом, во флотацию:

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

Мне показалось, что это очень хорошо работает - поместить график в середину таблицы 3х3. Затем метки можно поместить в другие ячейки.

<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

Пример для двухдимного графа (оси 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

Я использую идею 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")

Answer 9

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

Это тоже будет работать.