web-dev-qa-db-fra.com

Comment utiliser le formateur d'infobulles et toujours afficher la couleur du graphique (comme il le fait par défaut)?

Si j'utilise l'info-bulle Highcharts par défaut, elle affiche un cercle de la couleur des données du graphique (les cercles bleu clair/foncé à http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/ ) :

tooltip with colored dots

Mais si vous utilisez une mise en forme personnalisée sur l'info-bulle ( http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/ ), les couleurs n'apparaissent pas:

customized tooltip without dots

Comment obtenir/utiliser cette couleur dans une info-bulle au format personnalisé? D'après ce que je peux dire, il n'y a rien dans leur documentation ( http://api.highcharts.com/highcharts#tooltip.formatter ) expliquant comment utiliser cela dans une info-bulle formatée personnalisée.

Cela affiche les couleurs de données dans l'info-bulle par défaut:

tooltip: {
    shared: true
}

Mais cela ne signifie pas:

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

        $.each(this.points, function(i, point) {
            s += '<br/>'+ point.series.name +': '+
                    point.y +'m';
        });

        return s;
    },
    shared: true
},
jqueryhighcharts
32
WOUNDEDStevenJones

J'ai trouvé la documentation pour cela ( http://api.highcharts.com/highcharts#tooltip.pointFormat ). Le code HTML qu'ils utilisent se trouve sous pointFormat, pas dans le formateur:

<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>

Voici le code mis à jour à utiliser pour obtenir les cercles colorés dans l'info-bulle:

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

        $.each(this.points, function(i, point) {
            s += '<br/><span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': ' + point.y;
        });

        return s;
    },
    shared: true
},
48
WOUNDEDStevenJones

Amélioration sur WOUNDEDStevenJones réponse, mais avec une solution non jQuery spécifique:

Pour imiter le code HTML suivant dans pointFormat ( http://api.highcharts.com/highcharts#tooltip.pointFormat ):

<span style="color:{series.color}">\u25CF</span>

J'ai créé ce code non jQuery pour une fonction de formateur d'infobulles:

formatter: function() {
    /* Build the 'header'.  Note that you can wrap this.x in something
     * like Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x)
     * if you are dealing with a time series to display a more 
     * prettily-formatted date value.
     */
    var s = '<span style="font-size: 10px">' + this.x + '</span><br/>';

    for ( var i = 0; i < this.points.length; i++ ) {

        var myPoint = this.points[i];
        s += '<br/><span style="color:' 
             + myPoint.series.color
             + '">\u25CF</span>'
             + myPoint.series.name + ': ';

        /* Need to check whether or not we are dealing with an 
         * area range plot and display a range if we are
         */
        if ( myPoint.point.low && myPoint.point.high ) {

            s += myPoint.point.low + ' - ' + myPoint.point.high;

        } else {

            s += myPoint.y;

        }
    }

    return s;
},
shared: true
6
Mik Cox

Si vous souhaitez que la partie principale de l'infobulle soit identique et que la valeur x soit formatée différemment, vous pouvez utiliser la propriété headerFormat à la place et utiliser point.key plutôt que this.x. Cela accomplira la même chose sans avoir à reproduire le corps de la série.

tooltip: {
    headerFormat: '<b>{point.key}</b><br/>'
}
3
VG1

Vous pouvez utiliser:

> $.each(this.points, function () {
>   s += '<br/><span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': ' + '<b>' + this.y + '</b>';
> });
0
Renan Rocha