JQuery Данные о флоке данных/оси над графиком

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

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

Ответы

Ответ 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 sourcecode, особенно функцию measureLabels (это получает вы представляете, как сам флот позиционирует метки ярлыков) и формат тика по умолчанию, который выглядит как

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