jQuery Flot Daten/Achse Etiketten auf der Oberseite von Graphen

Gibt es eine Möglichkeit, durch überlagerung der x-Achse und y-Achse numerische Etiketten auf eine jQuery Flot Diagramm. So, ich will den Aufkleber nicht außen, neben der Grafik, aber die Grafik selbst.

Im folgenden Beispiel wird ein overlay-div am oberen Rand der Grafik für die Anmerkungen:
http://people.iola.dk/olau/flot/examples/annotating.html

Gibt es eine einfache Methode greifen den text und die Formatierung einer Achse innerhalb flot und erstellen eine solche überlagerung aus? Oder, gibt es vielleicht noch eine bessere Art und Weise der überlagerung der Achsen-Beschriftungen am oberen Rand der Grafik?

Ist meine Antwort nicht befriedigend sein/arbeiten? Bitte um feedback

InformationsquelleAutor Candidasa | 2009-12-03

  1. 20

    Einer Weise, die ist nicht besonders sauber und vor allem nicht gut funktionieren, wenn Sie planen, zu zeigen x - und y-Achsen-tick-Beschriftungen auf der gleichen Zeit, ist die labelMargin option auf die grid auf einen negativen Wert.

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

    Eine zweite Idee könnte sein, greifen alle div's, die haben class="tickLabel" nachdem das Diagramm gemalt wurde. Und dann "manuell" änderungen an der 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 noch einige Probleme hat als die niedrigste tick label-Werte auf der x - und y-Achse, die einander überlappen und den niedrigsten/höchsten tick label-Werte auf der x - und y-Achse positioniert auf den Kanten des Graphen. Aber mit einigen fein-tuning, könnte dies eine praktikable Lösung.

    Eine Dritte Idee wäre, direkt mit einem tickFormatter für die hilfsstrichbeschriftungen der x - und y-Achse. Dies funktioniert ähnlich wie die zweite Idee, aber würde Sie direkt dort, wo Sie sein möchten, ohne die vielleicht spürbar "label flackern" auf die Neupositionierung, die auftreten können mit der Funktion in die zweite Idee.

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

    Wie diese tickFormatter - Funktion Aussehen könnte ist am besten abgeleitet, indem man die jQuery Flot sourcecode vor allem die Funktion measureLabels (diese bekommt Sie eine Idee, wie Flot selbst Positionen die tick labels) und das voreingestellte Häkchen formatter, die aussieht wie

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

    InformationsquelleAutor jitter

Schreibe einen Kommentar