dados jQuery Flot / eixo de etiquetas no topo do gráfico

Question

Existe uma maneira para sobrepor o eixo-x e do eixo Y etiquetas numéricas em um gráfico jQuery Flot. Então, eu quero os rótulos para não estar fora, ao lado do gráfico, mas em cima do gráfico em si.

O exemplo a seguir cria um div sobreposição no topo do gráfico para as anotações: http://people.iola.dk/olau/flot/examples/annotating. html

Existe uma maneira simples de pegar o texto e formatação de um eixo de dentro flot e criando uma tal sobreposição com isso? Ou, há talvez uma outra maneira melhor de sobrepor os rótulos do eixo em cima do gráfico?

Answer 1

Uma forma, que não é particularmente limpo e especialmente não vai funcionar muito bem se você pretende mostrar x e rótulos do eixo y de carrapatos, ao mesmo tempo, é para definir a opção labelMargin na grid para um valor negativo .

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

---

A segunda ideia poderia ser para pegar todas de div que têm class="tickLabel" após o gráfico foi pintado. E, em seguida, "manualmente" alterar o seu posicionamento 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
    }
});

Claro que isto ainda tem alguns problemas como os valores mais baixos de etiquetas de carrapatos em X e Y-eixo se sobrepõem uns aos outros e os valores mais altos / baixos etiqueta de carrapatos em X e Y-eixo vai ser posicionado sobre os bordos do gráfico. Mas com algum ajuste fino esta pode ser uma solução viável.

---

Uma terceira idéia seria usar diretamente um tickFormatter para os rótulos de escala do xe y-eixos. Isso funciona semelhante à segunda idéia, mas iria colocá-los diretamente onde você quer que eles sejam, sem a talvez perceptível "cintilação rótulo" na reposicionamento que pode ocorrer com a função na segunda ideia.

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

Como esta função tickFormatter poderia ser semelhante é melhor derivados, olhando para a jQuery Flot Sourcecode especialmente o measureLabels função (isso fica-lhe uma idéia como a própria Flot posiciona os rótulos de escala) e o formatador carrapato padrão que se parece com

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