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


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




    차트컴포넌트 이용하기


    차트컴포넌트는 별도의 패키지를 이용해야 사용이 가능합니다.

    app.json 에 requires 검색 후, "charts" 를 추가로 선언 후, 재빌드가 완료되면 차트컴포넌트 준비가 완료됐습니다.


    차트컴포넌트 종류


    ① Ext.chart.CartesianChart 클래스를 이용하며, xtype으로는 'cartesian' 이라고 선언을 해주면 됩니다.

      cartesian 컴포넌트의 경우, 보통 X,Y 축으로 구성되있는 막대,선,영역 그래프를 이용할때 사용되는 

     컴포넌트입니다.


    ② Ext.chart.PolarChart 클래스의 경우 xtype은 'polar' 로 선언을 하면 되고, cartesian컴포넌트에 비해 극좌표를 이용하는 그래프를 출력하고자 할때 사용되는 컴포넌트입니다.

    예를들면 원형, 도넛차트,레이더차트,파이차트,가우지차트등을 표시할때 주로 사용되는 컴포넌트입니다.


    cartesian 컴포넌트의 핵심 config 속성


    axes  : 그래프의 축(X/Y)을 정의하는 속성이며, 사용하고자 하는 type은 아래와 같이 3가지를 이용합니다.


    numeric : 숫자값을 표시하고자 할때 사용되는 type


    time : 날짜,시간값을 표시하고자 할때 사용되는 type


    category : 데이터 포인트(카테고리)를 표시하고자 할때 사용되는 type



    series : 모든 그래프(cartesian,polar) 컴포넌트에서 공통로직을 이용하기위한 클래스입니다.

    series에서 정의할 수 있는 속성들은 라벨,하이라이트, 툴팁등 다양한 기능들을 포함시킬 수 있습니다.


    3D 막대차트


    axes에 정의된 type들과 series에 정의한 타입값 뒤에 '3d' 라고만 주어지면 3D 막대그래프 생성이 됩니다.

    3D 막대그래프는 ExtJS 5.1 버전 이후부터 사용가능합니다.



    세로막대 그래프 단일데이터 예제




    위 코드를 3d 그래프 변경



    가로막대 그래프 단일데이터 예제





    Posted by 몽고

    • 2018.09.05 14:46

      비밀댓글입니다

      • BlogIcon 몽고
        2018.09.05 15:12 신고

        센차버전이 몇을쓰시는중이신지알수있을까요?

    • 강병헌
      2018.09.05 16:40 신고

      version: 3.5.1.348
      channel: 3.5-stable
      platform: 0.36.7
      cmd: 6.1.2.15
      framework: Ext JS 6.0.x
      센차버전 정보입니다.

      • BlogIcon 몽고
        2018.09.05 16:42 신고

        6버전이면 cmd 빌드용으로 사용하지않으시나요?;; 그럼 기존 컴포넌트들을 어떻게쓰시는지요?


    • 2018.09.05 16:59

      비밀댓글입니다

      • BlogIcon 몽고
        2018.09.05 17:05 신고

        그렇다면 동일하게 차트관련 부분도 requires에 정의하시고 사용하시면 동작이 되지 않으신건가요?

        그리고 잘리긴했지만 이클립스 구조에 app.json 파일이 있는것 같습니다만...


      • 2018.09.05 17:08

        비밀댓글입니다


    • 2018.09.05 17:15

      비밀댓글입니다


      • 2018.09.05 17:20

        비밀댓글입니다

    • 강병헌
      2018.09.05 17:31 신고

      cmd 사용은 하지 않고 기본 설정된 상태에서 컴포넌트를 사용했습니다.
      그리고 app.json 파일은 센차가 설치된 폴더에서 찾아서 복사해 온 것입니다.
      강좌의 내용과 같이 requires에 charts를 적고 재빌드 방법을 몰라 그냥 저장한 뒤 톰캣을 실행해서 봐도 차트 화면이 나오지 않습니다.

      • BlogIcon 몽고
        2018.09.05 17:34 신고

        어찌되었든... cmd로 index.html 디렉토리가 있는 상위 디렉토리내에서 sencha cmd로 sencha app watch 동작시켜보셔야 하실거 같네요...
        이게 구조가 기존에 나와있는 vuejs나 리액트같은 애들이랑 개념이 비슷해져서...

    • 강병헌
      2018.09.05 18:18 신고

      명령 프롬프트 상에서 index.html 디렉토리가 있는 상위 디렉토리에서 sencha app watch 를 하면 [ERR] Command must be run from an application folder 이라고 나옵니다.
      제가 방법을 잘못 알고 있는 건가요?

      • BlogIcon 몽고
        2018.09.05 18:24 신고

        음.. 부분적으로 강제로 폴더를 옮겨서 cmd에서는 해당 구조를 인식 못하는거 같습니다...

        어떻게 구조가 잡혀있는지 직접 확인하지 않는 이상은 추측만으로는 파악할 수 없겠습니다...

        sencha cmd를 이용한 기본 빌드로 프로젝트 구조가 어떻게 생기는지 파악 하신 다음, 기본 골격에 맞춰서 기존 프로젝트 진행된 파일들을 옮기면서 작업을 진행하셔야 하는것처럼 보입니다.

    • 강병헌
      2018.09.06 21:48 신고

      안녕하세요 아직도 궁금증이 풀리지 않아서요
      너무 귀찮게 해 드리는 것 같아 죄송합니다.

      https://docs.sencha.com/extjs/6.0.2/guides/components/introduction_to_charting.html
      이 페이지에 cmd 가 없으면 index.html 페이지 에

      https://i.imgur.com/LPjYt4f.jpg
      위 이미지의 내용처럼
      추가하라고 하던데 여기서 {SDKLocation}과 {toolkitName}, {themeName}는 어떤 걸 입력해야 하나요?

      • BlogIcon 몽고
        2018.09.06 21:51 신고

        아마 차트관련 js 파일을 html파일에 include 하면되지않을까싶습니다.