jQuery Flot etiquetas de datos / eje en la parte superior de la gráfica

Question

¿Hay una manera de superponer el eje x y etiquetas numéricas del eje y en un gráfico jQuery Flot. Por lo tanto, quiero que las etiquetas para no estar fuera, junto a la gráfica, pero en la parte superior de la gráfica en sí.

El siguiente ejemplo crea un div superposición en la parte superior del gráfico para las anotaciones: http://people.iola.dk/olau/flot/examples/annotating. html

¿Hay una manera sencilla de agarrar el texto y el formato de un eje desde dentro flot y la creación de una superposición como fuera de él? O, ¿hay quizás otra mejor manera de superponer las etiquetas de los ejes en la parte superior de la gráfica?

Answer 1

Una forma, que no es particularmente limpia y sobre todo no va a funcionar muy bien si va a mostrar las etiquetas de x y garrapatas eje y, al mismo tiempo, es para establecer la opción labelMargin en el grid a un valor negativo .

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

---

Una segunda idea podría ser para agarrar todos de div que han class="tickLabel" después de la gráfica ha sido pintada. Y luego "manualmente" alterar su posicionamiento 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
    }
});

Por supuesto, esto todavía tiene algunos problemas como los valores de la etiqueta de garrapatas más bajos en las direcciones x y el eje y se solapan entre los / más altos valores de la etiqueta de garrapatas más bajos en las direcciones x y el eje y otro y serán colocados en los bordes de la gráfica. Sin embargo, con algunos ajustes que esto podría ser una solución viable.

---

Una tercera idea sería utilizar directamente un tickFormatter para las etiquetas de garrapatas de los ejes x y el eje y. Esto funciona de forma similar a la segunda idea, pero sería colocarlos directamente en la que desea que sean quizá sin la notable "parpadeo etiqueta" en el reposicionamiento que puede ocurrir con la función en la segunda idea.

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

Como esta función tickFormatter podría parecer mejor se deriva mirando el jQuery Flot código fuente especialmente la función measureLabels (esto se obtiene una idea de cómo sí Flot posiciona las etiquetas señalizadoras) y el formateador garrapata por defecto que se parece a

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