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). Тогда только то, что вам нужно, это catching 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(); 
    } 
});