Метка оси во Flot

#javascript #flot

Вопрос:

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

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

Спасибо 🙂

Ответ №1:

В flot нет встроенных функций.

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

В частности, есть два человека, которые недавно внесли изменения в flot, связанные с метками:

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

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

1. Я собираюсь попробовать сделать это самостоятельно с расположенными разделениями. Спасибо.

2. Метка оси y на домашней странице выполняется так же, как указано в этом ответе: с помощью тщательно расположенных divs. Однако, похоже, что версия 0.9 Flot будет включать метки осей .

3. Спасибо @MatthewWalker — как только будет выпущен 0.9, я обновлю свой ответ

4. ну что ж. … это сработало, но это также удалило мое пользовательское форматирование метки, так что не стоит

Ответ №2:

Бесстыдный самопереключатель: я исправил и значительно расширил плагин xuanluo для flot-axislabels: http://github.com/markrcote/flot-axislabels Насколько я знаю, на данный момент это лучшее решение для меток оси.

1. у меня это сработало ого-го. мне кажется, это может быть приемлемым ответом

2. Должен быть принятый ответ. Интеграция прошла безболезненно

3. Это абсолютно правильный ответ! Спасибо.

Ответ №3:

я использую этот обходной путь:

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

Очень просто, максимальное значение по оси Y заменяется пользовательской строкой. Я не тестировал на оси X, но я не вижу причин, по которым это не должно работать.

1. к сожалению, она не отображается на моем, поскольку Flot решил скрыть последнюю (максимальную) галочку с графика

2. какова цель toFixed(2)?

3. @knocte Без toFixed(2) вы могли бы в конечном итоге увидеть на своем графике такие вещи: 11.5000000004 . Не очень привлекательно.

Ответ №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>

Ответ №5:

Пример для графика 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;
}

Ответ №6:

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

Это тоже сработает.

Ответ №7:

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