2017-07-07 21 views
0

シリーズをホバリングしたときにすべてのマーカーの外観を変更したいが、次のコード(http://jsfiddle.net/fw852fy9/4/)が正しく機能しない。どうしましたか?HighCharts散布図のホバリングシリーズのすべてのマーカーを整形する

Highcharts.chart('container', { 
     chart: { 
      type: 'scatter' 
     }, 
    plotOptions: { 
     series: { 
     lineWidth:1, 
       states: { 
        hover: { 
         lineWidthPlus: 2, 
      marker: { 
       enabled: true, 
       radius:3, 
       states: { 
       hover: { 
        fillColor:'#FF0000', 
        lineColor:'#00FF00', 
        lineWidth:3, 
        radius:12 
       } 
       } 
      } 
        } 
       }, 
     marker: { 
      enabled: true, 
      radius:3, 
      states: { 
        hover: { 
       fillColor:'#FF0000', 
       lineColor:'#00FF00', 
       lineWidth:3, 
       radius:12 
       } 
      } 
     } 
     } 
    }, 
    series: [{ 
     data: [[29.9, 71.5], [106.4, 129.2], [144.0, 176.0], [135.6, 148.5], [216.4, 194.1], [95.6, 54.4]] 
    }] 
}); 

答えて

1

ホバー状態は、ホバリングされたポイントに対してのみ機能します。すべてのマーカーを上に置くように設定するには、プログラムで状態を変更する必要があります。シリーズマウスオーバー/マウスアウト。

series: [{ 
stickyTracking: false, 
events: { 
    mouseOver: function() { 
    this.data.forEach(p => p.setState('hover')) 
    }, 
    mouseOut: function() { 
    this.data.forEach(p => p.setState()) 
    } 
}, 

例:http://jsfiddle.net/0zu9jmca/

+0

うわー。それは優雅な解決策です。 – tic