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

Question

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

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

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

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);
};