Tickformatter funktioniert in der neuesten Version von Flot nicht wie erwartet

Question

In unserer früheren Version von Flot funktionierte die folgende Tickformatter-Funktion problemlos. Sie zeigte den Wert an und verwendete die Klasse korrekt.

yaxis: {
     tickFormatter: function(v, axis) {
        return "<span class='axisLabel'>" + v + "%</span>";
     }

In der neuesten Version (v. 0.7) werden die Tags wörtlich wiedergegeben, so dass sie neben <span class='axisLabel'>50%</span> wo die Beschriftung der y-Achse sein soll. Ich sollte nur eine Liste von Prozentsätzen sehen.

Ich habe so viel Fehlersuche wie möglich betrieben, aber ich habe nicht herausgefunden, was die Ursache dafür ist. Jede Idee würde geschätzt werden.

Answer 1

Das liegt an einer kürzlichen "Verbesserung" in der Art und Weise, wie die Bezeichnungen behandelt werden, denke ich. Aus README.md in der Entwicklungsversion:

Die Achsenbeschriftungen werden nun mit Canvas-Text gezeichnet, wobei ein Parsing nach Zeilenumbrüche zu unterstützen. Dies behebt verschiedene Probleme, bedeutet aber auch, dass sie kein HTML-Markup mehr unterstützen, sondern als DOM-Elemente angesprochen oder direkt mit CSS gestylt werden.

Im Einzelnen scheint es so zu sein, dass

function insertAxisLabels() {...}

wurde ersetzt durch

function drawAxisLabels(){...}

zu einem bestimmten Zeitpunkt. Früher wurden die Achsenbeschriftungen als ein Bündel von <div> Elemente, wie folgt:

<div class="tickLabels" style="font-size:smaller">
  <div class="xAxis x1Axis" style="color:#545454">
    <div class="tickLabel" style="position:absolute;text-align:center;left:-14px;top:284px;width:75px"><em>0</em></div>
    [... div elements for other labels...]  
  </div>
</div>

Dies ermöglichte die Verwendung von HTML-Code im TickFormatter. In der neuesten Version ist all dies verschwunden, und die Beschriftungen werden dem Canvas direkt über

ctx.fillText(your_label, x, y);

Daher funktionieren keine html-Formatierungs-Tags mehr. Dinge, die früher einfach waren, wie z. B. die Gestaltung der Häkchen oder die Umwandlung in Links, sind jetzt nicht mehr so einfach. Vielleicht können die Flot-Entwickler etwas Licht ins Dunkel bringen, wie man die gleiche Funktionalität in der neuen Version am besten erreichen kann.

Ich verwende Flot hauptsächlich für Barcharts. Ein (hässlicher) Workaround, der für mich zu funktionieren scheint, ist die gesamte drawAxisLabels-Funktion in der neuesten jquery.flot.js durch die insertAxisLabels-Funktion aus der stabilen Version zu ersetzen (nachdem ich sie in drawAxisLabels umbenannt habe). Zusätzlich muss ich labelWidth in den xaxis options meiner Plots manuell einstellen, da sonst die Breite der Plots falsch berechnet wird.

Answer 2

function formatter(val, axis) {
    return "<span style='font-weight: bold'>" +  val / 1000000 + "m</span>"; 
}

var usersData = { color: "#00FF55", data: [[1, 900000], [2, 926000], [3, 959000], [4, 1056000], [5, 1242300]] };

$(document).ready(function() {
    $.plot($("#UserGraph"), [usersData], { xaxis: { ticks: [] }, yaxis: { tickFormatter: formatter } });
});

Wenn ich die Formatvorlage entferne, werden die Zahlen wieder zu normalen, nicht fettgedruckten Zahlen.