Comment utiliser l'info-bulle formateur et encore de tableau d'affichage de couleur (comme c'est le cas par défaut)?

Si je suis en utilisant la valeur par défaut Highcharts info-bulle, il affiche un cercle de la couleur du tableau de données (la lumière/bleu foncé cercles à http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/):

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

Comment utiliser l'info-bulle formateur et encore de tableau d'affichage de couleur (comme c'est le cas par défaut)?

Comment obtenez-vous/utilisation de la couleur dans une mis en forme personnalisé info-bulle? À partir de ce que je peux dire, il n'y a rien dans leur documentation (http://api.highcharts.com/highcharts#tooltip.formatter) en expliquant comment l'utiliser dans un mis en forme personnalisé info-bulle.

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

tooltip: {
    shared: true
}

Mais ce n'est 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
},

InformationsquelleAutor WOUNDEDStevenJones | 2014-05-08

highcharts jquery

48

J'ai trouvé la documentation de cette (http://api.highcharts.com/highcharts#tooltip.pointFormat). Le code HTML qu'ils utilisent est situé sous pointFormat, pas de formatage:
```
\u25CF {series.name}: {point.y} 
```
Voici le code mis à jour à utiliser pour obtenir les cercles colorés dans l'info-bulle:
```
tooltip: {
 formatter: function() {
 var s = ''+ this.x +'';

 $.each(this.points, function(i, point) {
 s += ' \u25CF ' + point.series.name + ': ' + point.y;
 });

 return s;
 },
 shared: true
},
```
- Comme de Highcharts 4.0.4, vous devez utiliser des guillemets autour de la valeur de l'attribut style - les guillemets simples ne fonctionnent pas. HTH
- Je comprends que c'est un vieux thread mais pour ceux qui cherchent une solution à ce problème avec Highcharts 5.0.14 cette solution n'a pas fonctionné pour moi, mais de changer le style de l'article par le suivant: de style="color:'+point.color+'"
- Merci, @CraigHowell, j'ai mis à jour ma réponse à inclure. Honnêtement, je ne me souviens pas pourquoi j'ai eu cette variable dans les accolades et les autres concaténés, mais tout est la concaténation de chaîne maintenant.
- merci à vous, je n'aurais pas pensé à elle aujourd'hui sans votre réponse me pointer dans la bonne direction.
InformationsquelleAutor WOUNDEDStevenJones

De l'amélioration WOUNDEDStevenJones réponse, mais avec un non-jQuery solution spécifique:

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

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

J'ai créé cette non-jQuery reliant code pour une info-bulle formateur de la fonction:

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

InformationsquelleAutor Mik Cox

3

Si vous voulez la partie principale de l'info-bulle le même aspect, et de la valeur x à être formaté différemment, vous pouvez utiliser le headerFormat propriété plutôt et de point d'utilisation.clé plutôt que cela.x. Cela permettra d'accomplir la même chose sans avoir à reproduire la série de corps.
```
tooltip: {
 headerFormat: '{point.key} '
}
```
InformationsquelleAutor 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>';
> });

InformationsquelleAutor Renan Rocha

Vous devez vous connecter pour publier un commentaire.