jQuery Flot data/метки осей поверх графика

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

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

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

12
flot graphing jquery label

1 ответов

один из способов, который не особенно чист и особенно не будет работать хорошо, если вы планируете показывать метки тиков X и y одновременно, - установить на 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 (это дает вам представление о том, как сам флот позиционирует метки ТИКов) и форматер по умолчанию, который выглядит как

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