몽고's 개발 블로그

닫기 검색결과 전체 보기

    ExtJS6 스물네번째강의 - ExtJS 6 영역 차트 만들기(ExtJS 6 Create area chart graph)

    ExtJS 6 동영상강좌 2017. 3. 3. 13:43

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


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


    https://youtu.be/VzS036iTMAs


    영역 그래프


    영역차트는 선 사이의 영역을 구별하여 데이터를 표시

    시간이 지남에 따라 함계를 표시하여 경향을 측정하는데 주로 이용합니다


    범례선언



    위와같이 엑셀에서 그래프 출력 시, 하단에 빨간 네모부분을 범례라고 부릅니다.

    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 코드로 값을 표시 해주어야 합니다.


    저작자표시 비영리 변경금지 (새창열림)
    'ExtJS 6 동영상강좌' 관련 글 more
    • ExtJS6 스물여섯번째강의 - ExtJS 6 원형 차트 만들기(ExtJS 6 Create Pie chart graph) 2017.03.07
    • ExtJS6 스물다섯번째강의 - ExtJS 6 분산/분포 차트 만들기(ExtJS 6 Create Scatter chart graph) 2017.03.06
    • ExtJS6 스물세번째강의 - ExtJS 6 선형 차트 만들기(ExtJS 6 Create line chart graph) 2017.02.27
    • ExtJS6 스물두번째강의 - ExtJS 6 누적 막대 그래프 만들기(ExtJS 6 Create stacked bar chart graph) 2017.02.24
    Posted by 몽고
블로그 이미지

by 몽고

공지사항

    최근...

  • 포스트
  • 댓글
  • 더 보기

태그

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

글 보관함

«   2025/07   »
일 월 화 수 목 금 토
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

티스토리툴바