몽고's 개발 블로그

닫기 검색결과 전체 보기

    ExtJS6 스물세번째강의 - ExtJS 6 선형 차트 만들기(ExtJS 6 Create line chart graph)

    ExtJS 6 동영상강좌 2017. 2. 27. 09:32

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


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


    https://youtu.be/QRT9FQQMipQ



    선형 그래프


    선형 그래프는 정보를 직성르 통해서 연결된 일련의 데이터 포인트로 표시합니다.

    꺽은 선형 그래프는 종종 일정기간 동안 데이터의 추세를 시각화하는데 사용되는 그래프입니다.



    단건 표시하는 선형그래프 VS 단건 표시하는 막대그래프의 차이는?


    xtype이 cartesian이라는 것 그리그 axes config, series config 속성 모두 동일합니다.

    다만, 다른 config value값이 존재한다면, 

    그것은 바로 series config내의 type config 속성이 bar에서 line 으로 변경만 해주면 됩니다.



    다중 표시하는 선형그래프 vs 다중 표시하는 누적그래프의 차이는?


    누적 막대그래프를 표현했을 경우에는 series config가 JSON OBJECT 형식 + field와 label이 배열 형식으로 value가 선언되었다면,

    다중데이터의 선형그래프의 경우에는, series config가 JSON ARRAY 형식에 각 LINE 타입의 CONFIG가 여러개를 선언하는 것입니다.



    꺽은선형 그래프를 부드럽게 표현하고 싶다면? 


    series -> smooth conifg를 true로 선언을 하라



    그래프의 최소값 / 최대값 을 정의해주기 위해서는?


    axes 속성의 minimum / maximum config 속성을 정의



    각 데이터의 마커표시를 하기위해서는?


    series conifg에 marker 속성을 이용하여 서브속성으로  radius에 대한 value를 선언


    오늘 최종 코드 정리



    저작자표시 비영리 변경금지 (새창열림)
    'ExtJS 6 동영상강좌' 관련 글 more
    • ExtJS6 스물다섯번째강의 - ExtJS 6 분산/분포 차트 만들기(ExtJS 6 Create Scatter chart graph) 2017.03.06
    • thumbnail
      ExtJS6 스물네번째강의 - ExtJS 6 영역 차트 만들기(ExtJS 6 Create area chart graph) 2017.03.03
    • ExtJS6 스물두번째강의 - ExtJS 6 누적 막대 그래프 만들기(ExtJS 6 Create stacked bar chart graph) 2017.02.24
    • ExtJS6 스물한번째강의 - ExtJS 6 차트 가로/세로 막대그래프 컴포넌트 다루기( ExtJS 6 chart horizontal / vertical bar graph component handling) 2017.02.23
    Posted by 몽고
블로그 이미지

by 몽고

공지사항

    최근...

  • 포스트
  • 댓글
  • 더 보기

태그

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

글 보관함

«   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

티스토리툴바