jQuery Flot etichette dati / assi sulla cima del grafico

Question

C'è un modo per sovrapporre l'asse xe asse y etichette numeriche su un grafico jQuery Flot. Quindi, voglio le etichette di non essere al di fuori, accanto al grafico, ma sulla parte superiore del grafico stesso.

L'esempio seguente crea un div overlay sulla parte superiore del grafico per le annotazioni: http://people.iola.dk/olau/flot/examples/annotating. html

C'è un modo semplice di afferrare il testo e la formattazione di un asse da dentro flot e la creazione di una tale sovrapposizione fuori di esso? Oppure, c'è forse un altro modo migliore di sovrapporre le etichette degli assi sulla parte superiore del grafico?

Answer 1

Un modo, non particolarmente pulita e soprattutto non funziona bene se si prevede di mostrare xe asse y graduazione etichette nello stesso tempo, è quello di impostare l'opzione labelMargin sulla grid ad un valore negativo .

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

---

Una seconda idea potrebbe essere quella di prendere tutte le div di che hanno class="tickLabel" dopo che il grafico è stato dipinto. E poi "manualmente" alterare il loro posizionamento 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
    }
});

Naturalmente questo ha ancora alcuni problemi come i più bassi valori di etichetta tick sul xey asse vanno a sovrapporsi ai massimi valori di etichetta bassi / tick sul xey asse altra e saranno posizionate sui bordi del grafico. Ma con un po 'di messa a punto questa potrebbe essere una soluzione praticabile.

---

Una terza idea sarebbe utilizzare direttamente un tickFormatter per le etichette delle tacche di x ed y. Questo funziona in modo simile alla seconda idea, ma li porrebbe direttamente in cui si desidera che siano senza il forse evidente "label sfarfalla" a riposizionamento che possono verificarsi con la funzione nella seconda idea.

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

Come questa funzione tickFormatter potrebbe apparire come è meglio derivato, cercando in jQuery Flot sorgente soprattutto la funzione measureLabels (questo si ottiene un idea di come Flot si posiziona le etichette delle tacche) e il formattatore predefinito di spunta che appare come

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