2017-07-07 30 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

相關問題