Question

我正在使用系列工具提示来呈现自定义工具提示。我无法找到如何设置工具提示的样式。

例如。

系列1系列工具提示 - ＆gt; background-color：＆＃39;＃F00＆＃39;

系列2系列工具提示 - ＆gt; background-color：＆＃39;＃0F0＆＃39;

系列3与系列工具提示 - ＆gt; background-color：＆＃39;＃00F＆＃39;

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

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

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

Answer 1

您必须使用tooltip.formatter为每个系列实现不同的背景颜色。

如果您想要与系列颜色不同的颜色，我将使用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'
        }]
    };

Plunker演示

Answer 2

另一种方法是使用plotOptions.series.events.mouseOver更新工具提示的颜色（无useHTML并编辑所需的格式）：

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

现场演示： http://jsfiddle.net/kkulig/Lc9rugy4/

如何使用angular2-highcharts设计系列工具提示的背景颜色？

2 个答案: