如何在高图表中查找鼠标出事件的系列名称

Question

我的系列有一个鼠标悬停和鼠标出事件，因此当鼠标悬停在其上时，默认灰色的线条颜色将变为红色，当鼠标继续移动时，默认灰色的线条颜色将变为灰色。现在，我想包含某种{if}例程，以便根据系列名称将线条颜色从红色更改为灰色或黑色。但是，检查系列名称的正确命令是什么？我用"series.name"、"graph.attr.name"等尝试过，但徒劳无功。

这是小提琴。

和代码：

$(function () {
    var chart = new Highcharts.Chart({
            chart:
            {
                renderTo: "container",
                type: "line"
            },
            title: 
            {
                text: "Improved Drinking Water Coverage - Percentage of Total Population",
                align: "center",
                y: 20,
                style: 
                {
                    fontFamily: "Arial",
                    fontSize: "20px",
                    fontWeight: "bold",
                    color: (Highcharts.theme && Highcharts.theme.textColor) || "black"
                }
            },
            subtitle:
            {
                text: "200 countries comparison",
                align: "center",
                y: 40,
                style: 
                {
                    fontFamily: "Arial",
                    fontSize: "12px",
                    fontWeight: "",
                    color: (Highcharts.theme && Highcharts.theme.textColor) || "black"
                }
            },
            xAxis: 
            {
                categories: ['1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012'], 
                labels:
                {
                    step: 2
                },
                tickWidth: 0,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: 
            {
                title: 
                {
                    text: "% of Population",
                    align: "high",
                    endOnTick: false,
                    maxPadding: 0.2,
                    rotation: 0,
                    x: 0,
                    y: -20
                },
                min: 0,
                max: 100
            },
            legend:
            {
                enabled: false
            },
            tooltip:
            {
                crosshairs: true,
                useHTML: true,
                headerFormat: '<small>{point.key}</small><br />',
                pointFormat: '<span style="color: #ef0012"><b>{series.name}:</b></span>' + ' {point.y}',
                footerFormat: ''
            },
            plotOptions:
            {
                series:
                {
                    connectNulls: true,
                    shadow: false,
                    lineWidth: 1,
                    marker:
                    {
                        enabled: false
                    },
                    events:
                    {
                        mouseOver: function()
                        {
                            this.graph.attr('stroke', '#FF0000');
                        },
                        mouseOut: function() 
                        {
                            // =========================================================
                            // =========================================================
                            // =========================================================
                            // Here should go what color it goes back to...
                            if {series.name == "Africa"}
                            {
                              this.graph.attr('stroke', 'rgba(255, 100, 100, 0.5)');
                            }
                            else
                            {
                              this.graph.attr('stroke', 'rgba(100, 100, 100, 0.2)');
                            }
                            // =========================================================
                            // =========================================================
                            // =========================================================
                        }
                    }
                }
            },
            series: 
            [       {
                        color: 'rgba(100, 100, 100, 0.2)',
                        data: [null,5,5,5,5,5,8,12,15,19,22,26,29,33,36,40,43,47,50,54,57,61,64],
                        name: "Afghanistan"
                    },
                    {
                        color: 'rgba(200, 100, 100, 0.8)',
                        data: [53,53,54,55,56,57,57,58,59,60,60,61,61,62,63,63,64,65,65,66,66,68,68],
                        name: "Africa"
                    }]
        });
});

感谢您的任何提示。

Answer 1

"This"对象是系列的，所以只需要引用 this.name。

mouseOver: function () {
                    var color;
                    if(this.name === 'Africa')
                        color = 'green';
                    else
                        color = 'red';
                    this.graph.attr('stroke', color);
 },

示例：http://jsfiddle.net/f3rgendb/2/