ExtJS6 스물다섯번째강의 - ExtJS 6 분산/분포 차트 만들기(ExtJS 6 Create Scatter chart graph)
ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다.
(YOUTUBE 채널 구독해주세요!!)
분산/분포 그래프
분산형 차트는 데이터를 점의 집합으로 표시하는데 유용한 그래프 컴포넌트입니다.
데이터들간의 상관관계를 찾는데 도움이 되며 여러 측정값을 표시하는데 적합한 차트입니다.
기존 차트와 다른점이 있다면? axes 모두 numeric!!
기본적으로 이전 강좌의 cartesian 관련 차트들은 axes config 속성이 category + numeric 의 조합으로 예를 들었습니다.
이번 분산차트의 경우는 xy 축의 값이 모두 numeric인 데이터를 표출하는데 유용한 차트입니다.
series config에서 label 속성을 이용하느냐, tooltip 속성을 이용하느냐!
데이터를 보기위해서는 두속성 모두를 사용해도 되지만, label 속성같은경우는, 포인트들이 밀집되어 있을 경우 라벨들이 겹쳐지는 현상이 발생되어 label 보다는 tooltip 속성을 이용하는것을 권해드리고 싶습니다.
툴팁 ▶ renderer > setHtml function 사용법
renderer 1번째 parameter : 툴팁자기 자신의 텀포넌트를 가지고 있는 object
renderer 2번째 parameter : 데이터 스토어에 담겨있는 각각의 field/record
툴팁객체.setHtml()을 할 경우, 일반적으로 툴팁 영역내에 HTML 양식으로 문구 및 기타 내용들을 표현할 수 있습니다.
jQuery 의 html() 함수와 유사하다고 생각하시면 됩니다.