-1

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

例如。

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

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

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

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

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

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

4

2 回答 2

0

您必须使用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演示

于 2017-12-10T06:38:52.733 回答
0

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

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

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

于 2017-12-11T20:35:14.663 回答