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

debugcn 发表于 Dev

Purva Kshatriya

我会给不同系列的整个工具提示使用不同的背景色。我检查了highcharts api文档，但它们在series.tooltip = {}中没有背景色选项。您能为此提出一些建议吗？

我的问题与此类似。例如我想通过格式化程序对系列应用红色，而不希望使用工具提示选项中给出的黄色背景颜色。请检查此小提琴-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]        
        }]
    });
});

提前致谢。

pot

您可以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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。