Gibt es eine Möglichkeit, zusätzliche Daten an das Serienobjekt zu übergeben, die im Diagramm-Tooltip angezeigt werden?
beispielsweise
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
}
hier können wir nur series.name, this.x & this.y für die Serie verwenden. Nehmen wir an, ich muss einen anderen dynamischen Wert allein mit dem Datensatz übergeben und kann über ein Serienobjekt darauf zugreifen. Ist das möglich?
Vielen Dank im Voraus.
series
Objekt anzuhängen und in diesem Handler anzuzeigen?Antworten:
Ja, wenn Sie das Serienobjekt wie folgt einrichten, wobei jeder Datenpunkt ein Hash ist, können Sie zusätzliche Werte übergeben:
In Ihrem Tooltip können Sie über das Attribut "point" des übergebenen Objekts darauf zugreifen:
Vollständiges Beispiel hier: https://jsfiddle.net/burwelldesigns/jeoL5y7s/
quelle
Darüber hinaus können Sie mit dieser Lösung sogar so viele Daten speichern, wie Sie möchten :
Danke Nick.
quelle
datetime
als x-Wert, möchten aber dem Tooltip zusätzliche Daten hinzufügen.Für Zeitreihendaten, insbesondere mit genügend Datenpunkten, um die Turboschwelle zu aktivieren , funktionieren die oben vorgeschlagenen Lösungen nicht. Im Fall der Turboschwelle liegt dies daran, dass Highcarts erwartet, dass die Datenpunkte ein Array wie folgt sind:
Um die Vorteile der Turboschwelle (die beim Umgang mit vielen Datenpunkten wichtig ist) nicht zu verlieren, speichere ich die Daten außerhalb des Diagramms und suche den Datenpunkt in der Tooltip-
formatter
Funktion nach. Hier ist ein Beispiel:Dieser Ansatz funktioniert für alle Diagrammtypen.
quelle
data: _.map(data, row => [row['timestamp'], row['value']])
seindata: chartData.map(row => [row.timestamp, row.value])
? Außerdem brauchst du kein Lodash. Sie können Array.find verwenden . Es wird vom IE nicht unterstützt, aber Sie verwenden ES6 bereits (const
) und MS hat die Unterstützung des IE im Jahr 2016 eingestellt .chartData
. Ich bin es gewohnt, lodash zu benutzen, aber du hast recht. Ich habe mein Beispiel aktualisiert, damit es bibliotheksunabhängig ist. Vielen Dank.Ich verwende AJAX, um meine Daten von SQL Server abzurufen, und bereite dann ein js-Array vor, das als Daten in meinem Diagramm verwendet wird. JavaScript-Code nach erfolgreichem AJAX:
Um nun zusätzliche Metadaten im Tooltip anzuzeigen:
Ich verwende eine DataRow, um meine Ergebnismenge zu durchlaufen, und verwende dann eine Klasse, um die Werte zuzuweisen, bevor sie im Json-Format zurückgegeben werden. Hier ist der C # -Code in der von Ajax aufgerufenen Controller-Aktion.
Mir ist klar, dass es eine effizientere und akzeptablere Möglichkeit gibt, in C # zu codieren, aber ich habe das Projekt geerbt.
quelle
Nur um eine Art Dynamik hinzuzufügen:
Dies geschah zum Generieren von Daten für ein gestapeltes Säulendiagramm mit 10 Kategorien.
Ich wollte für jede Datenreihe der Kategorie 4 zusätzliche Informationen (Bild, Frage, Ablenker und erwartete Antwort) für jede der Datenreihen anzeigen:
In der Highcharts-Sektion:
Hoffe es hilft jemandem.
quelle