Come utilizzare il formattatore del tooltip e ancora visualizzare il colore del grafico (come per default)?

Question

Se sto usando il tooltip Highcharts di default, viene visualizzato un cerchio il colore dei dati del grafico (la luce/cerchi blu scuro a http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/):

Ma se si utilizza la formattazione personalizzata sulla tooltip (http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/), i colori non vengono visualizzati:

Come si ottiene/utilizzare il colore in un tooltip personalizzato formattato? Da quello che posso dire, non c'è nulla nella loro documentazione (http://api.highcharts.com/highcharts#tooltip.formatter) che spiega come usare questo in un suggerimento formattato personalizzato.

Questo visualizza i colori di dati nel tooltip di default:

tooltip: { 
    shared: true 
} 

Ma questo non lo fa:

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

Answer 1

ho trovato la documentazione per questo (http://api.highcharts.com/highcharts#tooltip.pointFormat). L'HTML si sta utilizzando si trova sotto pointFormat, non formattatore:

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

Ecco il codice aggiornato per utilizzare per ottenere i cerchi colorati nella descrizione:

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

Answer 2

Migliorare su WOUNDEDStevenJones risposta, ma con una soluzione non jQuery specifica:

di imitare il seguente codice HTML in pointFormat (http://api.highcharts.com/highcharts#tooltip.pointFormat):

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

Ho creato questo codice di affidamento non jQuery per una funzione tooltip formattatore:

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 

Answer 3

Se si desidera che la parte principale del tooltip lo stesso aspetto, e solo il valore x deve essere formattato in modo diverso, è possibile usa invece la proprietà headerFormat e usa point.key piuttosto che this.x. Ciò realizzerà la stessa cosa senza dover riprodurre il corpo della serie.

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

Answer 4

È possibile utilizzare:

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