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

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

12 голосов
/ 03 декабря 2009

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

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

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

1 Ответ

20 голосов
/ 06 декабря 2009

Один из способов, который не особенно чист и особенно не будет работать хорошо, если вы планируете показывать метки тиков по осям 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);
};
...