Jak używać formantu podpowiedzi i nadal wyświetlać kolor wykresu (jak to ma domyślnie)?

Question

Jeśli używam podpowiedź domyślne Highcharts, wyświetla kręgu kolor danych wykresów (światło/ciemne niebieskie koła w http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/):

Ale jeśli używasz niestandardowego formatowania na podpowiedź (http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/), kolory nie są wyświetlane:

Jak dostać/użyć tego koloru w niestandardowym sformatowana podpowiedzi? Z tego, co wiem, nie ma w ich dokumentacji (http://api.highcharts.com/highcharts#tooltip.formatter) wyjaśnienia, jak używać tego w niestandardowej sformatowanej podpowiedzi.

ten wyświetla kolory danych w dymku domyślnie:

tooltip: { 
    shared: true 
} 

Ale tego nie robi:

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

znalazłem w dokumentacji tego (http://api.highcharts.com/highcharts#tooltip.pointFormat). HTML oni używają znajduje się pod pointFormat nie formater:

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

Oto zaktualizowany kod użyć aby uzyskać kolorowe kręgi w dymku:

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

Poprawa na WOUNDEDStevenJones odpowiedź, ale z non-jQuery specyficzne rozwiązanie:

naśladować następujące HTML w pointFormat (http://api.highcharts.com/highcharts#tooltip.pointFormat)

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

Stworzyłem ten kod polegające, non-jQuery dla funkcji podpowiedzi formatyzatora:

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

Jeśli chcesz główną część podpowiedzi wyglądają tak samo, a tylko wartości X być sformatowane inaczej, można zamiast tego użyj właściwości headerFormat i użyj polecenia point.key, a nie this.x. Osiągnie to samo bez konieczności reprodukowania ciała serii.

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

Answer 4

może używać:

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