jQuery Flot данные/метки осей в верхней части графика

Question

Есть ли способ наложить числовые метки по осям X и Y на график jQuery Flot.Итак, я хочу, чтобы метки были не снаружи, рядом с графиком, а поверх самого графика.

В следующем примере создается наложение div поверх графика для аннотаций:http://people.iola.dk/olau/flot/examples/annotating.html

Есть ли простой способ получить текст и форматирование оси изнутри флота и создать из него такое наложение?Или, может быть, есть другой лучший способ наложения меток осей поверх графика?

Answer 1

Один из способов, который не особенно чист и особенно не будет хорошо работать, если вы планируете одновременно отображать метки делений по осям X и Y, — это установить labelMargin вариант на grid до отрицательного значения.

var plot = $.plot(placeholder, data, {
    ...
    grid: { ..., labelMargin: -20, ... }
    ...
});

---

Вторая идея могла бы заключаться в том, чтобы захватить все divу которых есть class="tickLabel" после того, как график был нарисован.А затем «вручную» измените их позиционирование CSS.

$("div.tickLabel").each(function(i,ele) {
    ele = $(ele);
    if (ele.css("text-align") == "center") { //x-axis
        ele.css("top", ele.position().top - 20); //move them up over graph
    } else {  //y-axis
        ele.css("left", ele.position().left + 20); //move them right over graph
    }
});

Конечно, здесь все еще есть некоторые проблемы, поскольку самые низкие значения меток делений по осям X и Y будут перекрывать друг друга, а значения меток самых низких/самых делений по осям X и Y будут располагаться по краям графика. .Но при некоторой доработке это может стать жизнеспособным решением.

---

Третьей идеей было бы напрямую использовать tickFormatter для меток делений по осям X и Y.Это работает аналогично второй идее, но разместит их прямо там, где вы хотите, без заметного «мерцания метки» при изменении положения, которое может произойти с функцией из второй идеи.

var plot = $.plot(placeholder, data, {
    ...
    xaxis: {
        ...,
        tickFormatter: function formatter(val, axis) {
           //return appropriately absolute positioned element
        }
    },
    ...
});

Как это tickFormatter функция может выглядеть так, что ее лучше всего получить, посмотрев на Исходный код jQuery Flot особенно функция measureLabels (это дает вам представление о том, как сам Flot позиционирует метки тиков) и средство форматирования тиков по умолчанию, которое выглядит так:

function (v, axis) {
    return v.toFixed(axis.tickDecimals);
};