하이 차트의 그룹화 된 막 대형 차트의 개별 막대에 레이블 지정

Question

HighCharts의 그룹화 된 막 대형 차트에서 개별 막대에 축 레이블을 제공하는 프로그램 방식이 있습니까?

사용 사례 : 사용 사례는 그룹화되고 스택 된 그래프를 다룰 때 사용됩니다. 이 그래프를 사용하면 개별 막대가없는 한 개별 막대가 나타내는 내용을 시각적으로 (도구 설명없이) 전달하기가 어렵습니다.

기본 동작 : http://www.highcharts.com/demo/column-stacked-and-grouped

목표 : 일례로서 은 초기에 각 클러스터의 각 바가 서로 다른 성별을 나타내는 것이 명확 할 수있는 적층 그룹화 열 그래프에 대한 HC 데모 참조 : 다음은 내가 성취하려는 것을 보여줍니다. 두 번째 x 축과 같이 프로그래밍 방식으로이 작업을 수행 할 수 있습니까? 아마도 또 다른 아이디어는 스택 총계의 영리한 배치를 사용하는 것이지만, 물론 실제 스택 총계를 표시하는 방식으로 나타날 것입니다.

Answer 1

그것은 당신의 이미지와 정확히 같은 결과는 아니지만이 stackLabels 표시

yAxis: { 
    ... 
    stackLabels: { 
     enabled: true, 
     formatter: function() { 
      return this.stack; 
     } 
    } 
}, 

은이 칼럼의 상단에있는 라벨을 표시합니다.

Example

Answer 2

당신을 도울 수있는 몇 가지 옵션이 있습니다.

먼저 stackLabels 포맷터를 사용하면 레이블에 포함 된 내용을 확인할 수 있습니다.

둘째, veticalAlign : "bottom"을 사용하면 스택 맨 아래에 레이블을 배치 할 수 있습니다.

세 번째로 'y'옵션을 사용하면 레이블을 기본 위치에 상대적으로 이동할 수 있습니다.

잡아 당김은 차트 플롯 영역 외부로 레이블을 옮길 수 없다는 것입니다. 한 가지 방법은 Y 축을 음수 값으로 시작하여 레이블을 넣을 수있는 공간을 확보하는 것입니다. 그런 다음 x 축의 위치를 ​​차트 영역으로 이동할 수 있습니다.

http://jsfiddle.net/WY6QB/

xAxis: { 
      offset:-43, 
      labels:{ 
       y:40 
      }, 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 


stackLabels: { 
       verticalAlign:"bottom", 
       y:20, 
       enabled: true, 
       formatter: function() { 
        return this.stack; 
       } 
      } 

유일한 것은 왼쪽은 가짜 '-2'Y 축에 포인트를 제거하는 것입니다.

-EDIT- startOnTick을 false로 설정하고 y 축 최소값을 -1.9로 설정하면 허위 -2 포인트가 사라집니다.

min: -1.9, 
startOnTick:false, 

http://jsfiddle.net/V6Cp2/

Answer 3

당신은 grouping categories 플러그인을 사용할 수 있습니다.