Wie verwende ich den Tooltip-Formatierer und zeige immer noch die Farbe des Diagramms an (so wie es standardmäßig ist)?

Question

Wenn ich die Standard-Highcharts Tooltip bin mit, es zeigt einen Kreis um die Farbe der Diagrammdaten (die Licht/dunkelblaue Kreise auf http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/):

Aber wenn Sie benutzerdefinierte auf die Verwendung der Formatierung Tooltip (http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/), die Farben erscheinen nicht:

Wie man bekommt/verwenden diese Farbe in einem benutzerdefinierten Format Tooltip? Von dem, was ich sagen kann, gibt es nichts in ihrer Dokumentation (http://api.highcharts.com/highcharts#tooltip.formatter) zu erklären, wie man dies in einem benutzerdefinierten formatierten Tooltip verwendet.

Dies zeigt die Daten Farben im Tooltip von Standard:

tooltip: { 
    shared: true 
} 

Aber dies nicht:

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

ich die Dokumentation für diese (http://api.highcharts.com/highcharts#tooltip.pointFormat) gefunden. Die HTML sie verwenden unter point befindet, nicht Formatierer:

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

Hier ist der aktualisierte Code zu verwenden, um die farbigen Kreise im Tooltip zu bekommen:

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

Verbesserung auf WOUNDEDStevenJones Antwort, aber mit eine nicht-jQuery spezifische Lösung:

den folgenden HTML in point (http://api.highcharts.com/highcharts#tooltip.pointFormat) zu imitieren:

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

Ich habe diesen nicht-jQuery angewiesen Code für eine Funktion Tooltip Formatierer:

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

Wenn Sie den Hauptteil des Tooltip gleich aussehen sollen, und nur den x-Wert unterschiedlich formatiert werden, können Sie Verwenden Sie stattdessen die Eigenschaft headerFormat und verwenden Sie stattdessen point.key statt this.x. Dies wird dasselbe erreichen, ohne den Serienkörper reproduzieren zu müssen.

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

Answer 4

können Sie verwenden:

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