ExtJS6 스물두번째강의 - ExtJS 6 누적 막대 그래프 만들기(ExtJS 6 Create stacked bar chart graph)
ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다.
(YOUTUBE 채널 구독해주세요!!)
누적 막대그래프
누적 그래프는 하나의 카테고리에 여러개의 범주가 겹쳐지는 차트를 의미
일반적으로 기간 또는 값에대한 모든 카테고리의 합계를 시각적으로 나타냅니다.
지난 시간에는 단일값에 대한 예를 들어서 막대그래프를 표현 했다면, 오늘은 2개이상의 값들을 이용하여 그래프 출력을 해보도록 합니다.
이전 코드와 다른점이 있다면, series config 속성에 yField 값이 배열형으로 선언하고, label config 속성에는 field config 속성 역시, 배열로 선언하시면 됩니다.
※ 단, 쌓이는 값에 대한 순서는 yField의 정해주는 store의 field 명 순서에따라 쌓이게 됩니다.
가로 변경에 대한 부분은 지난시간과 동일하게 axes config에 position 위치를 변경 후, cartesian config와 동일 depth에 flipXY 속성을 true로 정의해주기만 하면 됩니다.
또한 3D 막대그래프 역시, axes, series내에 정의된 type config 속성명 뒤에 "3d" 라는 명칭을 추가로 정의해주시기만 하면 됩니다.
위의 예제는 기존 누적그래프에서 추가로 툴바에 버튼2개를 생성하여 각 클릭 이벤트별 그룹차트로 출력할것인지, 누적차트로 출력할것인지에 대한 버튼 이벤트입니다.
그룹차트 VS 누적차트
§ 기본적으로 cartesian 컴포넌트를 셀렉터를 이용해서 series config 객체를 얻기위해서는 chart.getSeries()[0] 함수를 이용하여 시리즈 객체를 획득합니다.
그런 다음, setStacked(true/false) 구분에 따라 그룹차트로 출력할것인지, 누적차트로 만들것인지 결정을 하면 됩니다.
마지막으로, set 선언 후, char.redraw() 함수를 이용하여 차트를 다시 그려주셔야 합니다.
