webentwicklung-frage-antwort-db.com.de

Wie kann ich ein Highchart-Linienmarkierungssymbol aus dem Tooltip-Formatierer anzeigen?

Standardmäßig wird in Highcharts das Linienmarkierungssymbol in der QuickInfo angezeigt.

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
        }]
    });
});

http://jsfiddle.net/sashi799/vsyfmu77/

Wie können wir mit dem Tooltip-Formatierer das Linienmarkierungssymbol hinzufügen?

$(function () {
    $('#container').highcharts({

        tooltip: {
            formatter: function () {
                return this.x+'<br/>'+this.series.name+': '+this.y;
            }
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
        }]
    });
});

http://jsfiddle.net/sashi799/zrhaokrn/

Ich möchte das Kreissymbol vom Formatierer vor den Seriennamen setzen, wie es im Standardszenario der Fall ist.

13
Sas

Ich poste hier meine eigene Antwort als Kacper Madejs Antwort hier wird die Frage nicht wirklich beantwortet, es werden einfach die 5 verschiedenen Symbole, die Highcharts verwendet, in den gleichen Tooltip gestellt:

Other Answer Demo

Diese Antwort funktioniert, wenn wir mehrere Farben verwenden, aber wenn alle unsere Serien die gleiche Farbe haben, schlägt sie vollständig fehl - Sie können sie auch gar nicht anzeigen.


Ziehen Sie das entsprechende Symbol in unseren Tooltip

Example Tooltip JSFiddle-Demo

Highcharts macht eine symbolName-Eigenschaft in seinem graphic-Objekt verfügbar, das selbst eine Eigenschaft des point-Objekts ist. Folgende Formen werden verwendet:

  1. "circle"
  2. "diamond"
  3. "square"
  4. "triangle"
  5. "triangle-down"

Mit diesen Informationen können wir eine switchname__-Anweisung in unserer tooltip.formatter()-Funktion erstellen, die das relevante Symbol mit dem Symbolnamen abbildet, den Highcharts verfügbar macht:

var symbol;

switch ( this.point.graphic.symbolName ) {
    case 'circle':
        symbol = '●';
        break;
    case 'diamond':
        symbol = '♦';
        break;
    case 'square':
        symbol = '■';
        break;
    case 'triangle':
        symbol = '▲';
        break;
    case 'triangle-down':
        symbol = '▼';
        break;
}

Wir können das Symbol dann in unseren Tooltip einfügen, indem wir auf unsere Variable symbolverweisen:

return this.x + '<br/>' + symbol + ' ' + this.series.name + ': ' + this.y;

Farbe hinzufügen

Coloured Symbol JSFiddle-Demo

Wir können dies dann auf die Farbe in unserem Punkt erweitern, um sie an die Farbe der Serie anzupassen. Dazu müssen Sie einfach unseren symbolin ein <span> -Element einwickeln und ihm einen stylenamen__ zuweisen, der auf die Farbe der Serie eingestellt ist, die Highcharts uns durch this.series.color gibt:

'<span style="color:' + this.series.color + '">' + symbol + '</span>';

Vergewissern Sie sich, dass das Symbol vorhanden ist

Bevor Sie dies in Betrieb nehmen, sollten Sie sich jedoch bewusst sein, dass manchmal eine QuickInfo für einen Punkt angezeigt wird, der weder ein graphic-Objekt noch eine symbolName-Eigenschaft aufweist. Dies kann vorkommen, wenn sich ein Punkt außerhalb der sichtbaren Grenzen unseres Diagramms befindet. Wenn Sie den Mauszeiger über die Linie halten, wird ein Tooltip angezeigt. Der Punkt selbst ist jedoch nicht sichtbar, sodass keine grafischen Eigenschaften erforderlich sind.

Um JavaScript-Fehler zu vermeiden, müssen wir unsere Anweisung switchin die folgende Klausel ifeinschließen:

if ( this.point.graphic && this.point.graphic.symbolName )

Damit möchten Sie auch Ihre Variable symbolzunächst als leere Zeichenfolge ('') definieren, damit sie in unserem Tooltip nicht als undefined angezeigt wird:

var symbol = '';

Umgang mit benutzerdefinierten Markierungsbildern

Image Marker Example JSFiddle-Demo

Für dieses Beispiel habe ich das folgende Bild verwendet: Example Image Marker

Es ist erwähnenswert, dass diese Lösung zwar für diese Frage gut funktioniert, bei benutzerdefinierten Markierungsbildern jedoch nicht funktioniert. Wenn diese verwendet werden, gibt es weder ein graphicname__-Objekt noch eine symbolNamename__-Eigenschaft. Ich möchte sowieso keine der oben genannten Formen anzeigen.

Das erste, was Sie tun müssen, ist Highcharts mitzuteilen, dass wir HTML in unserem Tooltip verwenden möchten. Wir können dies tun, indem wir useHTML: true in unserem tooltipname__-Objekt angeben:

tooltip: {
    formatter: function() { ... },
    useHTML: true
}

Glücklicherweise unterstützen Highcharts-QuickInfos das HTML-Element <img /> und ermöglichen es uns, die benutzerdefinierte Bild-URL mithilfe von this.point.marker.symbol über die Eigenschaft symbolinnerhalb des Objekts markerabzurufen.

this.point.marker.symbol
-> "url(http://i.imgur.com/UZHiQFQ.png)"

Die zweite Hürde besteht darin, den url( und den ) zu entfernen, die die eigentliche Bild-URL umgeben. Dazu können wir einen regulären Ausdruck verwenden, um die zu entfernenden Bits abzugleichen. Der reguläre Ausdruck, mit dem ich gegangen bin, ist /^url\(|\)$/g, der wie folgt dargestellt wird:

Regexper Example

Der gam Ende gibt an, dass Übereinstimmungen gezogen werden sollen, sodass wir sowohl url( als auch ) auf einmal ersetzen können:

var url = this.point.marker.symbol.replace(/^url\(|\)$/g, '');
-> "http://i.imgur.com/UZHiQFQ.png"

Wir können dies dann in unser <img /> -Element einfügen und das in unserer symbol-Variable speichern:

symbol = '<img src="' + url + '" alt="Marker" />';

Schließlich Wir möchten sicherstellen, dass das Objekt markerund die Eigenschaft symbolvorhanden sind. Ich habe mich dazu entschieden, dies als else if über der ursprünglichen Anweisung ifzu tun, die im obigen Teil Sicherstellen, dass das Symbol vorhanden ist deklariert ist:

if ( this.point.graphic && this.point.graphic.symbolName ) { ) { ... }
else if ( this.point.marker && this.point.marker.symbol ) { ... }
30
James Donnelly

Sie können es so machen: http://jsfiddle.net/fspzj4xw/

tooltip: {
            formatter: function () {
                var s = '<b>' + this.x + '</b>';

                $.each(this.points, function () {
                    s += '<br/>' + '<span style="color:' + this.series.color + '"> ●♦▲▼■ </span>' + ' ' + this.series.name + ': ' + this.y + 'm';
                });

                return s;
            },
            shared: true
        },
3
Kacper Madej

Ich kann sehen, dass dies ein älterer Thread ist, aber da die Highcharts-API in einigen Punkten anders zu sein scheint als der ursprüngliche Beitrag, stelle ich hier ein Update mit den Details zur Verfügung, die gerade für mich gearbeitet haben, falls dies für andere hilfreich ist ...

Ich verwende Highcharts JS v4.2.6 (2016-08-02) (zusammen mit highcharts-ng 0.0.12) und konnte stattdessen nicht auf die Eigenschaft this.point.graphic.symbolName zugreifen, um die Lösung James Donnellys zu implementieren Ich musste es ändern, um auf this.series.symbol zuzugreifen.

Die Symbole in der switch-Anweisung werden aus ihren UTF-8 Geometric Shapes-Codes gerendert. Daher müssen die switch-Anweisungen wie folgt strukturiert werden: symbol = 'charactercodegoeshere';. (Beispiel: Symbol = '& # 9679' im Fall des Kreiszeichens)

Der folgende Code hat letztendlich das richtige Symbol in der richtigen Farbe in der QuickInfo des Diagramms für eine bestimmte Reihe gerendert:

tooltip: {
    style: {
        padding: 10,
        fontWeight: 'bold'
    },
    useHTML: true,
    formatter: function () {

        var symbol;

        switch ( this.series.symbol ) {
            case 'circle':
                symbol = '&#9679';
                break;
            case 'diamond':
                symbol = '&#9670';
                break;
            case 'square':
                symbol = '&#9632';
                break;
            case 'triangle':
                symbol = '&#9650';
                break;
            case 'triangle-down':
                symbol = '&#9660';
                break;
        }

        return Highcharts.dateFormat('%B %Y', this.x) + '<br/>' + '<span style="color:' + this.series.color + '; font-size: 1.5em;">' + symbol + '</span> ' + this.series.name + ': ' + this.y;
    }
}

Die Highcharts.dateFormat () -Methode wurde verwendet, um Zeitstempel in Millisekunden für die Anzeige zu formatieren.

3
Lauren O.

Eine einfache Lösung wäre, sich mit dem Ereignis "Series afterInit" zu verbinden und die Symbole hinzuzufügen:

Highcharts.addEvent(Highcharts.Series, 'afterInit', function() {
    this.symbolUnicode = {
        circle: '●',
        diamond: '♦',
        square: '■',
        triangle: '▲',
        'triangle-down': '▼'
    }[this.symbol] || '●';
});

Live-Demo anzeigen: http://jsfiddle.net/pjqz79pv/1/

1
Torstein Hønsi