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(); 
    } 
});