ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다.
(YOUTUBE 채널 구독해주세요!!)
영역 그래프
영역차트는 선 사이의 영역을 구별하여 데이터를 표시
시간이 지남에 따라 함계를 표시하여 경향을 측정하는데 주로 이용합니다
범례선언
위와같이 엑셀에서 그래프 출력 시, 하단에 빨간 네모부분을 범례라고 부릅니다.
ExtJS 역시 , legend 라는 config를 이용해서 범례 표시가 가능합니다.
대신, legend 속성만 설정한다고 정상적으로 출력이 되지 않고, 임의의 값으로 범례들이 출력됩니다.
이 부분을 해결하기 위해서는, 각 series config object에 title 을 작성 해주어야 합니다.
이 title 속성은 사람이 읽을수 있는 일련의 이름입니다. (범례에 표시됨) 이라고 document에 정의되어있습니다.
series → style config 속성을 통하여 영역의 투명도 조절
css 속성의 opacity 를 1미만으로 소수점으로 설정하여 겹쳐진 영역의 위치를 보여주도록 설정
series → highlightCfg 속성
마커에 하이라이트를 정의해주기 위해 선언
scaling 속성을 숫자값으로 지정해주면 마커 부분에 포인터를 가져다 놓을 때, 마커사이즈 변경이 되면서 포커스 기능을 제공합니다.
label 속성이 적용되지 않아요
area chart는 tooltip 이란 config를 series 속성에 추가로 정의 해주어서 마우스 포인터가 마커에 이동되었을때, 툴팁으로 출력 시키게 해주어야 합니다.
그리드 컬럼에서 값은 유지되고, 화면에 보여지는 표현값은 변경하기 위해 renderer config를 이용했던것 처럼 툴팁 역시, renderer 라는 속성을 정의 해주어야 합니다.
대신, 별도의 value 값은 존재하지 않고, 툴팁 객체의 setHtml 이라는 함수를 정의해서 툴팁 영역내의 HTML 코드로 값을 표시 해주어야 합니다.