如何使用angular2 highcharts设置系列工具提示的背景色样式？

我正在使用系列工具提示渲染自定义工具提示。我找不到如何设置工具提示的样式

比如说

系列1带有系列工具提示->背景色：'#F00'

系列2带有系列工具提示->背景色：'#0F0'

系列3带有系列工具提示->背景色：'#00F'

我不希望背景色在上面的示例中起作用，但它演示了我正在尝试做的事情

这可能与angular2海图有关吗？如果是这样，我将如何处理？我尝试了自定义格式化程序，但它恢复为默认的工具提示行为。

您必须为每个系列使用不同的背景色

如果您想要与系列颜色不同的颜色，我将使用userOptions

this.series.userOptions.colors

作为背景色

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'
        }]
    };

this.options={
标题：{text:'angular2 highcharts示例'}，
工具提示：{
背景颜色：空，
边框宽度：0，
影子：错，
是的，
格式化程序：函数（）{
返回“”+此.y+“”；
}
},
系列：[{
名称：“s1”，
数据：[2,3,5,8,13]，
allowPointSelect:true，
颜色：“#F00”，
},{
名称：“s2”，
数据：[-2，-3，-5，-8，-13]，
allowPointSelect:true，
颜色：'#0F0'
}]
};

---

演示

另一种方法是使用

plotOptions.series.events.mouseOver

更新工具提示的颜色（无

useHTML

并编辑所需格式）：

---

现场演示：

谢谢。这正是我需要的！

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'
        }]
    };

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