Highlight Tooltip freigegebenes Element auf hovered serie in Highcharts je

Question

Ich habe die folgende Tabelle: http://jsfiddle.net/5oso60oq/

JS:

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'bar' 
 
     }, 
 
     title: { 
 
      text: 'Stacked bar chart' 
 
     }, 
 
     xAxis: { 
 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
 
     }, 
 
     yAxis: { 
 
      min: 0, 
 
      title: { 
 
       text: 'Total fruit consumption' 
 
      } 
 
     }, 
 
     legend: { 
 
      reversed: true 
 
     }, 
 
     tooltip: { 
 
     \t shared: true 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       stacking: 'normal' 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: 'John', 
 
      data: [5, 3, 4, 7, 2] 
 
     }, { 
 
      name: 'Jane', 
 
      data: [2, 2, 3, 2, 1] 
 
     }, { 
 
      name: 'Joe', 
 
      data: [3, 4, 4, 2, 5] 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Was ich hervorheben tun möchte (oder Ändern Sie den Stil des Tooltip-Reihenelements abhängig von der schwebenden Reihe im Diagramm.

Zum Beispiel, wenn ich auf ‚Äpfel‘ Kartenserie auf den grünen Bereich bin schwebt, würde Ich mag ‚Joe‘ im Tooltip markieren, und so weiter ...

ich einige Tipps mit Hover-Veranstaltungen gefunden in Serie, aber es macht nicht gut.

Answer 1

sollten Sie freigegebenen Parameter deaktivieren und die Formatierer verwenden, die auf allen Serien und Punkte zu durchlaufen können. Fügen Sie die Bedingung hinzu, die den aktuellen x-Wert und die Druckpunkte überprüft.

tooltip: { 
    shared: false, 
    formatter: function() { 
    var series = this.series.chart.series, 
     each = Highcharts.each, 
     x = this.point.x, 
     txt = '<span style="font-size: 10px">' + this.key + '</span><br/>'; 


      each(series, function(serie,i) { 
     each(serie.data, function(data, j){ 
     if(data.x === x) { 
      txt += '<span style="color:' + data.color + '">\u25CF</span> ' + serie.name + ': <b>' + data.y + '</b><br/>'; 
     } 
     }); 
    }); 

    return txt; 

    } 
}, 

Beispiel: - http://jsfiddle.net/fsfyq89p/

Answer 2

link

 tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     } 

versuchen dieses