les étiquettes de données / d'axe jQuery Flot sur le dessus du graphe

Question

Est-il possible de superposer l'axe des x et des étiquettes numériques y axe sur un graphique jQuery Flot. Donc, je veux que les étiquettes de ne pas être à l'extérieur, à côté du graphique, mais au-dessus du graphique lui-même.

L'exemple suivant crée un div de superposition au-dessus du graphique pour les annotations: http://people.iola.dk/olau/flot/examples/annotating. html

est-il un moyen simple de saisir le texte et la mise en forme d'un axe à l'intérieur et Flot la création d'un tel recouvrement hors de celui-ci? Ou, est-il peut-être une autre meilleure façon de superposer les étiquettes d'axe au-dessus du graphique?

Answer 1

Une façon, ce qui est particulièrement propre et surtout ne fonctionnera pas bien si vous souhaitez afficher les étiquettes de X- et les tiques y-axe en même temps, est de mettre l'option labelMargin sur la grid à une valeur négative .

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

---

Une seconde idée pourrait être de saisir toutes les années qui ont div class="tickLabel" après le graphique a été peint. Et puis « manuellement » modifier leur positionnement 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
    }
});

Bien sûr, cela a encore quelques problèmes comme les valeurs les plus basses d'étiquettes de tiques sur les axes x et y axe se chevauchent les uns les autres et les valeurs d'étiquettes tiques les plus bas / les plus élevées sur le X- et l'axe y seront positionnés sur les bords du graphique. Mais avec un peu peaufinage cela pourrait être une solution viable.

---

Une troisième idée serait d'utiliser directement un tickFormatter pour les étiquettes de graduation de l'axe des x et l'axe y. Cela fonctionne similaire à la seconde idée, mais les placerait directement là où vous voulez être sans « vacillante étiquette » peut-être visible sur le repositionnement qui peut se produire avec la fonction dans la deuxième idée.

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

Comment cette fonction tickFormatter pourrait ressembler est mieux dérivé en regardant le jQuery Flot sourcecode en particulier la fonction measureLabels (ce qui vous a une idée comment Flot se positionne les étiquettes de tiques) et la formatter tique par défaut qui ressemble à

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