web-dev-qa-db-fra.com

Comment afficher le symbole de marqueur de ligne de la série Highchart à partir du formateur d’infos?

Par défaut, les graphiques en hauteur affichent le symbole de repère de ligne dans l'info-bulle.

$(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/

Comment utiliser le formateur d’infos, comment ajouter le symbole de marqueur de ligne?

$(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/

Je souhaite ajouter le symbole de cercle devant le nom de la série du formateur, comme dans le scénario par défaut.

javascripthighchartstooltiplinegraph
13
Sas

Je poste ici ma propre réponse en tant que La réponse de Kacper Madej ici ne répond pas du tout à la question, elle place simplement les 5 symboles différents utilisés par Highcharts dans la même info-bulle:

Other Answer Demo

Cette réponse fonctionne si nous utilisons plusieurs couleurs, mais elle échouerait complètement si toutes nos séries avaient la même couleur - vous pouvez également ne pas les afficher du tout.

Tirer le symbole approprié dans notre infobulle

Example Tooltip Démo de JSFiddle

Highcharts expose une propriété symbolName dans son objet graphic, qui est une propriété elle-même sur l'objet point. Les formes qu'il utilise sont:

  1. "circle" ●
  2. "diamond" ♦
  3. "square" ■
  4. "triangle" ▲
  5. "triangle-down" ▼

Avec ces informations, nous pouvons construire une instruction switch dans notre fonction tooltip.formatter() qui mappe le symbole pertinent avec le nom de symbole exposé par Highcharts:

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;
}

Nous pouvons ensuite placer le symbole dans notre info-bulle en référençant notre variable symbol:

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

Ajout de couleur

Coloured Symbol Démo de JSFiddle

Nous pouvons ensuite étendre ceci à la couleur dans notre point pour correspondre à la couleur de la série. Cela consiste simplement à envelopper notre symbol dans un élément <span> et à lui donner un ensemble style de la couleur de la série, ce que Highcharts nous donne via this.series.color:

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

S'assurer que le symbole existe

Cependant, avant de mettre cela en production, vous devez savoir qu’une info-bulle apparaît pour un point qui n’a ni objet graphic ni propriété symbolName. Cela peut se produire lorsqu'un point se trouve en dehors des limites visibles de notre graphique - une info-bulle apparaît lors du survol de la ligne, mais le point lui-même n'est pas visible et n'a donc pas besoin de propriétés graphiques.

Pour éviter les erreurs JavaScript, nous devons envelopper notre instruction switch dans la clause if suivante:

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

Avec cela, vous voudriez également définir initialement votre variable symbol comme une chaîne vide ('') afin qu'elle ne s'affiche pas comme non défini dans notre info-bulle:

var symbol = '';

Gestion des images de marqueur personnalisées

Image Marker Example Démo de JSFiddle

Pour cet exemple, j'ai utilisé l'image suivante: Example Image Marker

Il convient de noter que, si cette solution fonctionne bien pour cette question, elle ne fonctionnera pas si vous utilisez des images de marqueur personnalisées. Lorsque celles-ci sont utilisées, il n'y a pas d'objet graphic ni de propriété symbolName. t veux afficher aucune des formes ci-dessus de toute façon.

La première chose à faire est de dire à Highcharts que nous souhaitons utiliser HTML dans notre info-bulle. Nous pouvons le faire en spécifiant useHTML: true sur notre objet tooltip:

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

Heureusement, les info-bulles Highcharts prennent en charge l'élément HTML <img /> et nous permettent d'extraire l'URL d'image personnalisée via la propriété symbol dans l'objet marker à l'aide de this.point.marker.symbol.

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

Le deuxième obstacle consiste à supprimer les url( et ) entourant l'URL de l'image. Pour cela, nous pouvons utiliser une expression régulière pour faire correspondre les bits que nous voulons supprimer. L'expression régulière avec laquelle je suis allé est /^url\(|\)$/g, qui se présente comme suit:

Regexper Example

La variable g à la fin indique que nous souhaitons obtenir des correspondances afin de pouvoir remplacer à la fois url( et ) par un seul coup franc:

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

Nous pouvons ensuite le placer dans notre élément <img /> et le stocker dans notre variable symbol:

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

Enfin nous voulons nous assurer que les objets marker et symbol existent. J'ai choisi de le faire en tant que else if en plus de l'instruction if originale déclarée dans la partie S'assurer que le symbole existe} ci-dessus:

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

Vous pouvez le faire comme ceci: 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

Je peux voir que c'est un fil plus ancien, mais puisque l'API Highcharts semble différer sur certains points depuis l'article précédent, je propose ici une mise à jour avec les détails qui ont fonctionné pour moi au cas où cela aiderait les autres ... 

J'utilise Highcharts JS v4.2.6 (2016-08-02) (avec highcharts-ng 0.0.12) et je n'ai pas pu accéder à la propriété this.point.graphic.symbolName pour implémenter la solution de James Donnelly _ J'ai dû le modifier pour accéder à this.series.symbol. 

Les symboles qui apparaissent dans l'instruction switch sont rendus à partir de leurs codes de formes géométriques UTF-8 . Il est donc nécessaire de structurer les instructions switch de la manière suivante: symbol = 'charactercodegoeshere';. (ex: symbol = '& # 9679'; dans le cas du caractère de cercle)

Le code suivant a finalement rendu le symbole correct dans la couleur correcte dans l'info-bulle du graphique pour une série donnée:

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;
    }
}

La méthode Highcharts.dateFormat () a été utilisée pour formater des horodatages Epoch-millisecondes à afficher.

3
Lauren O.

Une solution légère consisterait à se connecter à l'événement Series afterInit et à ajouter les symboles suivants:

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

Voir la démonstration en direct: http://jsfiddle.net/pjqz79pv/1/

1
Torstein Hønsi