몽고's 개발 블로그

닫기 검색결과 전체 보기

    ExtJS6 스물다섯번째강의 - ExtJS 6 분산/분포 차트 만들기(ExtJS 6 Create Scatter chart graph)

    ExtJS 6 동영상강좌 2017. 3. 6. 19:39

    ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다.


    (YOUTUBE 채널 구독해주세요!!)


    https://youtu.be/FovgBmJqiD4


    분산/분포 그래프


    분산형 차트는 데이터를 점의 집합으로 표시하는데 유용한 그래프 컴포넌트입니다.

    데이터들간의 상관관계를 찾는데 도움이 되며 여러 측정값을 표시하는데 적합한 차트입니다.


    기존 차트와 다른점이 있다면? 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() 함수와 유사하다고 생각하시면 됩니다.


    분포차트 샘플코드


    버블차트 샘플코드

    저작자표시 비영리 변경금지 (새창열림)
    'ExtJS 6 동영상강좌' 관련 글 more
    • thumbnail
      ExtJS6 스물일곱번째강의 - ExtJS 6 데이터 바인딩 및 MVVM 구조이해( Understanding ExtJS 6 data binding and MVVM structure) 2017.03.14
    • ExtJS6 스물여섯번째강의 - ExtJS 6 원형 차트 만들기(ExtJS 6 Create Pie chart graph) 2017.03.07
    • thumbnail
      ExtJS6 스물네번째강의 - ExtJS 6 영역 차트 만들기(ExtJS 6 Create area chart graph) 2017.03.03
    • ExtJS6 스물세번째강의 - ExtJS 6 선형 차트 만들기(ExtJS 6 Create line chart graph) 2017.02.27
    Posted by 몽고
블로그 이미지

by 몽고

공지사항

    최근...

  • 포스트
  • 댓글
  • 더 보기

태그

  • extjs 강의
  • extjs chart series
  • extjs5
  • extjs 트리패널
  • extjs group chart
  • extjs grid
  • extjs data store
  • extjs treepanel
  • extjs stacked chart
  • extjs 차트
  • extjs6
  • extjs 6
  • extjs MVVM
  • extjs 그리드
  • extjs panel
  • extjs 3d 차트
  • extjs chart
  • extjs 무료강좌
  • extjs java
  • extjs 서버연동
  • extjs listeners
  • extjs 강좌
  • extjs graph
  • Ext.data.Store
  • extjs chart axes
  • extjs
  • extjs grid update
  • extjs 무료강의
  • extjs 그래프
  • extjs6 강좌

글 보관함

«   2025/10   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

링크

카테고리

포스팅 전체보기 (76)
Flutter(플러터) (0)
React (0)
React Native (0)
VueJS (1)
ExtJS (35)
ExtJS 6 동영상강좌 (35)
코르도바(cordova) (1)
Tip (4)

카운터

Total
Today
Yesterday
방명록 : 관리자 : 글쓰기
몽고's Blog is powered by daumkakao
Skin info material T Mark5.2 by 뭐하라
favicon

몽고's 개발 블로그

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • 포스팅 전체보기 (76)
    • Flutter(플러터) (0)
    • React (0)
    • React Native (0)
    • VueJS (1)
    • ExtJS (35)
    • ExtJS 6 동영상강좌 (35)
    • 코르도바(cordova) (1)
    • Tip (4)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바