Как найти название серии в Highcharts для mouseOut-event?

Question

У меня есть событие mouseOver и mouseOut для моей серии, так что цвет линии по умолчанию-серый меняется на красный, когда мышь нависает над ним и возвращается к серой, когда мышь движется дальше. Теперь я хотел бы включить какую-то подпрограмму {if}, чтобы изменить цвет линии от красного до серого или черного цвета в зависимости от названия серии. Но какова была бы правильная команда для проверки имени серии? Я пробовал его с помощью «series.name», с «graph.attr.name» и другими, но напрасно.

Адрес fiddle.

И код:

$(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.name.

mouseOver: function() { 
        var color; 

        if(this.name === 'Africa') 
         color = 'green'; 
        else 
         color = 'red'; 

        this.graph.attr('stroke', color); 
}, 

Пример: http://jsfiddle.net/f3rgendb/2/