Highcharts：堆叠图表的传说

Question

这是我举例说明问题的图表。

$(function() { 
    $('#container').highcharts({ 

     chart: { 
      type: 'column' 
     }, 

     title: { 
      text: 'Total fruit consumtion, grouped by gender' 
     }, 

     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 

     yAxis: { 
      allowDecimals: false, 
      min: 0, 
      title: { 
       text: 'Number of fruits' 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.x +'</b><br/>'+ 
        this.series.name +': '+ this.y +'<br/>'+ 
        'Total: '+ this.point.stackTotal; 
      } 
     }, 

     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 

     series: [{ 
      name: 'John', 
      data: [5, 3, 4, 7, 2], 
      stack: 'male' 
     }, { 
      name: 'Joe', 
      data: [3, 4, 4, 2, 5], 
      stack: 'male' 
     }, { 
      name: 'Jane', 
      data: [2, 5, 6, 2, 1], 
      stack: 'female' 
     }, { 
      name: 'Janet', 
      data: [3, 0, 4, 4, 3], 
      stack: 'female' 
     }] 
    }); 
}); 

我们在图例中有系列名称。图表与分组的列堆叠在一起。 我们已经将它们堆放在男性和女性类别中。

有没有什么办法让传说中的男性和女性？这样我们一次只能看到男性食物消费或女性食物消费。

可以这里指拨弄 - jsfiddle.net/bLZHd/

感谢

Answer 1

您可以使用labelFormatter与堆栈名称替换项目名称。传说中的两个系列应该隐藏（showInLegend）参数。然后只有你需要捕捉legendItemClick和迭代检查系列堆栈名称。

legendItemClick: function() { 
        var chart = this.chart, 
         key = this.options.stack; 

        $.each(this.chart.series,function(i,serie){ 

         if(serie.options.stack === key) { 
          if(serie.visible) 
           serie.hide(); 
          else 
           serie.show(); 
         }  

        }); 
        return false; 
       } 

http://api.highcharts.com/highcharts#legend.labelFormatter

Answer 2

你真的需要通过传说切换？

我建议你那样的问题，即由开关跨度：http://jsfiddle.net/bLZHd/1/

所有你需要的是：

$.each(chart.series, function (k, v) { 
    if (v.options.stack == elemId) { //elemId is the string to compare 
     chart.series[k].show(); 
    } else { 
     chart.series[k].hide(); 
    } 
});