Как включить эффект при наведении на всю серию, а не индивидуальных данных

Question

DEMO: http://jsfiddle.net/uwh7Lgyo/

Если возможно, я хотел бы парения, которые будут применяться background-color, вместо выделения каждого государства в отдельности. Это означает, что зависание воздействует на всю группу голубых состояний при зависании над синим состоянием, целая группа зеленых состояний при зависании над зеленым состоянием и т. Д.

Answer 1

Это возможно.

Первое, что пришло мне в голову, заключалось в том, чтобы состояние каждой точки серии было hover. Это может быть легко достигнуто с помощью Highcharts mouseOver и игровая mouseOut события:

 plotOptions: { 
      map: { 
       allAreas: false, 
       joinBy: ['hc-a2', 'code'], 
       mapData: Highcharts.maps['countries/us/us-all'] 
      }, 

      series: { 
       states:{ 
        normal: { 
         animation: false 
        } 
       }, 
       point: { 
        events: { 
         mouseOver: function(){ 
          var ser = this.series; 
          var data = ser.data; 
          $.each(data, function(){ 
           this.setState("hover") 
          }); 
         }, 
         mouseOut: function(){ 
          var ser = this.series; 
          var data = ser.data; 
          $.each(data, function(){ 
           this.setState() 
          });  
         } 
        } 
       } 
      } 
      }, 

Обратите внимание, что эти строки:

  states:{ 
       normal: { 
        animation: false 
       } 
      }, 

находятся там, чтобы предотвратить «не-зависания» aniamtion Highcharts автоматически применяется.

Пожалуйста, обратите внимание: http://jsfiddle.net/uwh7Lgyo/6/

С другой стороны, вы можете установить свой собственный цвет парения: При установке состояния в hover, Highcharts примет цвет, определенный для состояния series` парения, для пример:

series:{ 
    ..... 
    ..... 
    states:{ 
     hover:{ 
     color: 'red' 
     } 
    } 
} 

Вышеуказанный цвет будет окрашен в красный цвет, если состояние «зависание» запускается.

Смотрите в этом примере iv'e создано: http://jsfiddle.net/uwh7Lgyo/5/