javascript - 個々のデータではなくシリーズ全体のホバー効果を有効にする方法

Question

デモ: http://jsfiddle.net/uwh7Lgyo/

background-color可能であれば、各状態を個別に強調表示するのではなく、ホバーを で適用したいと思います。つまり、ホバーは、青色の状態にカーソルを合わせると青色の状態のグループ全体に影響し、緑色の状態にカーソルを合わせると緑色の状態のグループ全体に影響を与えます。

Answer 1

可能です。

最初に頭に浮かんだのは、各系列ポイントの状態を に設定することでしたhover。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
                }
            },

「ホバリングしない」アニメーションのハイチャートが自動的に適用されるのを防ぐためにあります。

ご覧ください: http://jsfiddle.net/uwh7Lgyo/6/

一方、独自のホバー カラーを設定できます。状態を に設定するとhover、ハイチャートはシリーズのホバー状態に定義された色を使用します。次に例を示します。

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

上記は、状態「ホバー」がトリガーされると、ポイントを赤で色付けします。

この例では、作成された iv'e を参照してください: http://jsfiddle.net/uwh7Lgyo/5/