하이 차트의 범례 그룹화

Question

두 개의 누적 막 대형 차트가 있지만 두 범례의 모든 범례가 함께 표시됩니다. 막대에 쌓인 항목을 기반으로 범례를 그룹화하려고합니다. 나를 도와 줄 수 있습니까?

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

      chart: { 
       type: 'bar' 
      }, 

      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: { 
       bar: { 
        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' 
      }] 
     }); 
    }); 

나는 비슷한 유형의 막대를 가지고 있습니다. 나는 janet과 jane을 그룹으로, joe와 john을 다른 그룹으로 함께 그룹화하려고합니다.

Answer 1

, 당신은 새로운 시리즈로이 작업을 수행 할 수 있습니다 '로 연결이'속성 3.

http://api.highcharts.com/highcharts#plotOptions.series.linkedTo

업데이트 예 : http://jsfiddle.net/jlbriggs/6gw5P/2/

linkedTo:':previous' 

Answer 2

다른 구성 요소를 식별 할 수 없기 때문에 스택으로 범례를 그룹화 할 수 없습니다 (개별 시리즈에 고유 한 색이 없거나 범례 색이 일치하지 않음) . 범례는 모든 별개의 데이터 소스이기 때문에 사람들에게 맵핑됩니다.

색이 다른 여러 구성 요소에 신경 쓰지 않는다면 누적 가로 막 대형 차트는 전혀 필요하지 않습니다. 당신은 2 개의 시리즈, 남성 및 여성을 가진 정상적인 막 대형 차트 만 가질 수 있습니다. 버전은 연결 기준의 예를 바탕으로

이

series: [{ 
       name: 'Male', 
       data: [10, 7, 8, 9, 7] 
      }, 
       name: 'Female', 
       data: [5, 5, 10, 6, 4] 
      } 
     } 

Answer 3

이 문제는 오래된 문제이지만 일련의 showInLegend를 설정하면 효과가 있으며 가장 쉬운 방법이라고 생각됩니다.

showInLegend: false 

예 :

series: [{ 
name: 'John', 
data: [5, 3, 4, 7, 2], 
stack: 'male', 
showInLegend: false 
}