Festlegen der x-Achse Wert als tooltip in der flot-Diagramme textuelle Daten
Ich habe versucht mit folgenden code in Flot char zu zeichnen Sie ein Diagramm. Diagramm Plotten als erwartet, aber nicht QuickInfo
$(function() {
var data = [["Aug 06",2],["Aug 07",1],["Aug 08",1.5],["Aug 09",0],["Aug 10",0],["Aug 11",0],["Aug 12",0]];
var options = {
series: {
lines: { show: true,
lineWidth: 1,
fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
},
points: { show: true,
lineWidth: 2
},
shadowSize: 0
},
grid: { hoverable: true,
clickable: true,
tickColor: "#eeeeee",
borderWidth: 0,
hoverable : true,
clickable : true
},
tooltip : true,
tooltipOpts : {
content : "Your sales for <b>%x</b> was <span>$%y</span>",
defaultTheme : false
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
min: 0
} ,
selection: {
mode: "x"
}
};
$.plot("#section-chart", [ data ], options);
//Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
Bei hover die Werte, tooltip zeigt an "Ihren Umsatz für %x war $2" stattdessen sollte es zeigt Your sales for Aug 06 was $2
Hier, wie soll ich pass x-Achse-Werte als tooltip in der flot-chart?
Was habe ich falsch gemacht. bitte Beratung ?
Was tooltip-plugin benutzt du?
ich benutze jquery.flot.tooltip.js
Könnten Sie bitte die Verwendung der fiddle.Ihre Daten ist ziemlich chaotisch. Daten format sollte
die ich erstellt habe, fiddle jsfiddle.net/mdineshkumarcs/qbXDw bitte prüfen
ich benutze jquery.flot.tooltip.js
Könnten Sie bitte die Verwendung der fiddle.Ihre Daten ist ziemlich chaotisch. Daten format sollte
[x,y]
wo x und y beide sollten integer
.Was Sie tun sollten, ist die Verwendung mode:"time"
- und Rückgabe-Termine per tick-formatter-Funktion für x.Dies wird für Sie tundie ich erstellt habe, fiddle jsfiddle.net/mdineshkumarcs/qbXDw bitte prüfen
InformationsquelleAutor mymotherland | 2013-08-12
Du musst angemeldet sein, um einen Kommentar abzugeben.
Der einfachste Weg, um Ihr problem zu lösen, ist zu ersetzen die
content
string mit einem callback:Definierte ich
getTooltip
um Ihre gewünschte Ausgabe:Es funktioniert, wie Sie sehen können, in der aktualisiert jsFiddle, aber möchten Sie vielleicht zu prüfen, die Beratung des Kapitäns, in den Kommentaren, und sehen, was am besten in Ihrem Fall.
Es zeigt sich in meinem browser (Firefox von 45,7 auf Linux).
InformationsquelleAutor Paulo Almeida
Die Lösung ist mit tooltipOpts -> Inhalt Methode mit einer callback-Funktion, um richtig zurück dynamische Daten auf das Etikett.
Ich herausgefunden, dass man ein 4. argument für die callback-Funktion der "tooltipOpts" eigentlich gibt Sie das ganze Daten-Objekt, aus dem das Diagramm/graph konstruiert wird.
Von hier aus können Sie leicht extrahieren Sie die X-Achsenbeschriftung, mit dem zweiten argument, der dieselbe Funktion wie der index des Labels zu extrahieren.
BEISPIEL:
Datenobjekt ich bin vorbei an der plot-Funktion:
Diagramm gerendert aus den oben genannten Daten Objekt:
Wie Sie sehen können, der auf der Vorschau, die Logik, die verwendet werden, zu machen den label-Inhalt dynamisch bilden die eigentlichen Daten, ist dies:
InformationsquelleAutor Aaron Marton