jQuery Etichette flottaggio dati/assi nella parte superiore del grafico

Question

C'è un modo per sovrapporre le etichette numeriche dell'asse xe dell'asse y su un grafico jQuery Flot. Quindi, voglio che le etichette non siano all'esterno, accanto al grafico, ma in cima al 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 di vero? Oppure, c'è forse un altro modo migliore di sovrapporre le etichette degli assi sulla parte superiore del grafico?

Answer 1

Un modo, che non è particolarmente pulito e in particolare non funziona correttamente se si prevede di mostrare le etichette di graduazione dell'asse X e Y allo stesso tempo, è impostare l'opzione labelMargin su grid su un valore negativo valore.

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

---

Una seconda idea potrebbe essere quella di prendere tutte le div 's 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 xe asse y si sovrappongono reciprocamente e/alti valori delle etichette tick bassi su xey asse saranno posizionato sui bordi del grafico. Ma con qualche 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. Funziona in modo simile alla seconda idea, ma li posizionerebbe direttamente dove preferisci senza lo "sfarfallio dell'etichetta" sul riposizionamento che potrebbe 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 guardando la jQuery Flot sourcecode soprattutto la funzione measureLabels (questo si ottiene un idea di come Flot si posiziona le etichette delle tacche) e il formattatore predefinito zecca che sembra

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