如何将不同的背景颜色应用于 highcharts 中不同系列的整个工具提示

Question

我会为不同系列的整个工具提示提供不同的背景颜色。我检查了 highcharts api 文档，但它们在 series.tooltip = {} 中没有背景颜色选项。你能为此提出一些方法或替代方案吗？

我检查了这个问题 - Changing backgroundcolor of tooltip for a specific data point in Highcharts

我的问题和这个类似。前任。我想通过格式化程序将红色应用于系列，而不想尊重工具提示选项中给出的黄色背景颜色。请检查此 fiddle - http://jsfiddle.net/eoqdcxn4/1/

    $(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        
        tooltip: {
            useHTML:true,
            backgroundColor:"yellow",
            formatter: function() {
                console.log(this);
                if(this.point.customBck)
                    return '<div style="background-color:red;">The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
                else
                    return '<div>The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
            }
        },
        
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        series: [{
            data: [{
                y:29.9,
                customBck: true
            }, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

提前致谢。

Answer 1

您可以根据悬停系列在 refresh 事件中更改工具提示背景颜色，例如：

    (function(H) {
        H.addEvent(H.Tooltip, 'refresh', function(e) {
            var series = this.chart.series.find(function(s) {
                return s.isHovered;
            });

            this.label.attr({
                fill: series.options.tooltipColor
            });
        });
    }(Highcharts));

    $(function() {
        var chart = new Highcharts.Chart({
            ...,

            plotOptions: {
                series: {
                    events: {
                        mouseOver: function() {
                            this.isHovered = true;
                        },
                        mouseOut: function() {
                            this.isHovered = false;
                        }
                    }
                }
            },
            series: [{
                tooltipColor: 'red',
                ...
            }, {
                tooltipColor: 'yellow',
                ...
            }]
        });
    });

现场演示： http://jsfiddle.net/BlackLabel/ojqews35/

API参考：https://api.highcharts.com/highcharts/plotOptions.series.events

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

如何将不同的背景颜色应用于 highcharts 中不同系列的整个工具提示

How can I apply different background color to entire tooltip for different series in highcharts

tooltip

highcharts