Wie style ich die Hintergrundfarbe der Serie Tooltip mit angular2-highcharts?

Question

Ich verwende eine Serien-Tooltip, um eine benutzerdefinierte QuickInfo zu rendern. Ich kann den Tooltip nicht stylen.

Zum Beispiel.

Serie 1 mit Serie Tooltip -> background-color: '# F00'

Serie 2 mit Serie Tooltip -> background-color: '# 0F0'

Serie 3 mit Serie Tooltip -> Hintergrund -Farbe: ‚# 00F‘

this.options = { 
    series: [ 
     { 
      name: 'Test', 
      data: seriesData, 
      color: '#4DCCFF', 
      tooltip: { 
       backgroundColor: '#F00', 
       headerFormat: '', 
       pointFormat: '{point.y}', 
      } 
     }, ... 
    ] 
} 

ich erwarte nicht, daß die Hintergrundfarbe in dem obigen Beispiel zu arbeiten, aber es zeigt, was ich versuche zu tun.

Ist das mit angular2-highcharts möglich? Wenn ja, wie würde ich das angehen? Ich habe einen benutzerdefinierten Formatierer ausprobiert, aber es wurde wieder auf das Standard-Tooltip-Verhalten zurückgesetzt.

Answer 1

Sie müssen tooltip.formatter verwenden, um für jede Serie eine andere Hintergrundfarbe zu erzielen.

Ich benutze userOptions this.series.userOptions.colors für Hintergrundfarbe, wenn Sie andere Farbe von Serienfarbe wünschen.

this.options = { 
     title : { text : 'angular2-highcharts example' }, 
     tooltip:{ 
      backgroundColor: null, 
      borderWidth: 0, 
      shadow: false, 
      useHTML:true, 
      formatter: function() { 
      return '<div style="background-color:'+this.series.userOptions.colors+';padding: 5px;border-radius: 5px;box-shadow: 2px 2px 2px; ">'+this.y+'</div>'; 
     } 
     }, 
     series: [{ 
      name: 's1', 
      data: [2,3,5,8,13], 
      allowPointSelect: true, 
      colors:'#F00', 
     },{ 
      name: 's2', 
      data: [-2,-3,-5,-8,-13], 
      allowPointSelect: true, 
      colors:'#0F0' 
     }] 
    }; 

Plunker Demo

Answer 2

Ein weiterer Ansatz ist plotOptions.series.events.mouseOver zu verwenden, um die Farbe des Tooltip zu aktualisieren (keine useHTML und Bearbeitung von Format erforderlich):

plotOptions: { 
    series: { 
     events: { 
     mouseOver: function() { 
      this.chart.tooltip.update({ 
      backgroundColor: this.color 
      }); 
     } 
     } 
    } 
    } 

Live-Demo:http://jsfiddle.net/kkulig/Lc9rugy4/