编辑 Highcharts Legend 上的点击事件

Posted 2023-02-16

【中文标题】编辑 Highcharts Legend 上的点击事件

【英文标题】：Edit click event on Highcharts Legend

【发布时间】：2020-10-01 10:55:49

【问题描述】：

我正在尝试编辑 Highcharts 图例项的点击事件。当前设置允许在单击图例项时切换真/假。相反，我希望单击图例项以将所有其他系列的可见性设置为 false，但单击的项目除外（基本上与现在的操作相反）。

我尝试构建一个 JSfiddle 来切换所有系列，但没有运气。见link

关键部分在这里：

  legendItemClick: function() 
    var chart = Highcharts.chart;
    var series = chart.series;
    for (item in series) 
        if (series[item].visible) 
            series[item].hide();
         else 
            series[item].show();
            
    ;        
    return false
  

单击图例项时，我尝试抓取图表和所有系列，然后循环浏览它们以切换可见性。

【参考方案1】：

这是另一种方法，您可以使用 plotOptions.series.events.legendItemClick 回调为所有系列实现所需的结果。

演示：http://jsfiddle.net/BlackLabel/vsj96c5x/

  plotOptions: 
    series: 
      events: 
        legendItemClick(e) 
          e.preventDefault();
          let chart = this.chart;

          chart.series.forEach(s => 
            if (s !== this && s.visible) 
              s.hide();
             else 
              s.show();
            
          )
        
      
    
  ,

API：https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick

【参考方案2】：

你可以试试这样的：

var mychart = Highcharts.chart('container', 
  series: [
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
    events: 
      legendItemClick: function() 
        return false
      
    
  , 
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
    events: 
      legendItemClick: function() 
        var numSeries = mychart.series.length;
        for (var i=0 ; i<numSeries ; i++) 
          if (mychart.series[i] != this) 
              if (mychart.series[i].visible == true) 
                mychart.series[i].hide();
               else 
                mychart.series[i].show();
              
          
        
        return false
      
    
  , 
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  ]
);

http://jsfiddle.net/Lamjdhy3/1/