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

相关问题