jQuery Flot Daten / axis Etiketten auf der Oberseite des Graphen

Question

Gibt es einen Weg, um die x-Achse und y-Achse numerische Beschriftungen auf eine jQuery Flot Graph zu überlagern. Also, ich möchte die Etiketten nicht draußen sein, neben der Grafik, sondern oben auf der Grafik selbst.

Im folgenden Beispiel wird ein Overlay-div auf dem Diagramm für die Anmerkungen: http://people.iola.dk/olau/flot/examples/annotating. html

Gibt es eine einfache Möglichkeit, den Text von erregenden und Formatierung einer Achse aus flicht und die Schaffung eines solchen Overlay aus ihm heraus? Oder gibt es vielleicht eine andere bessere Möglichkeit, die Achsenbeschriftungen der Überlagerung auf dem Diagramm?

Answer 1

Eine Möglichkeit, die nicht besonders sauber ist und vor allem nicht gut funktionieren, wenn Sie planen, x- und y-Achse Strichbeschriftungen zur gleichen Zeit zu zeigen, ist die labelMargin Option auf der grid auf einen negativen Wert gesetzt .

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

---

Eine zweite Idee könnte sein, alle div des greifen, die class="tickLabel" haben, nachdem der Graph gemalt wurde. Und dann „manuell“ ändern ihre CSS-Positionierung.

$("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
    }
});

Natürlich hat dies noch einige Probleme wie der niedrigsten tick-Label-Wert auf der x- und y-Achse sie und den niedrigsten / höchsten tick-Label-Wert auf der x- und y-Achse überlappt an den Rand positioniert werden des Graphen. Aber mit etwas Feinabstimmung könnte dies eine gangbare Lösung sein.

---

Eine dritte Idee wäre direkt ein tickFormatter für die Strichbeschriftungen der x- und y-Achse zu verwenden. Dies funktioniert ähnlich wie die zweite Idee, aber würde sich direkt platzieren, wo Sie wollen, ohne die vielleicht bemerkbar „label Flimmern“ sein auf Neupositionierung, die mit der Funktion in der zweiten Idee kommen kann.

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

Wie diese tickFormatter Funktion wie man am besten abgeleitet, indem man die jQuery Flot aussehen könnte Quelltext vor allem die Funktion measureLabels (diese bekommt man eine Idee, wie Flot sich die Zecke Etiketten Positionen) und die Standard-tick-Formatierer, die wie

sieht

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