이번장은 계량기차트(Gauge Chart)에 대하여 진행하도록 하겠습니다.Gauge 그래프는 보통 특정영역내에서 수치를 표현하기 위하여 사용되는 그래프 종류입니다.예를들면, 차량에 장착되어있는 RPM/속도 계기판이나 전압을 측정할때 사용하는 전압측정기등과 같은 화면을 Gauge라 부릅니다. ▼ 첫번째 이미지인 속도 계기판과 유사한 화면을 ExtJS에서 제공하는 Gauge 컴포넌트를 이용하여 제작해보도록 하겠습니다. 우선 전체 코드를 작성하여 실행결과 확인 후, 부분코드로 설명을 진행하도록 하겠습니다. ▼ Ext.onReady(function(){ var store = Ext.create('Ext.data.Store',{ fields : ['rpm','speed'], data: [{rpm : 0, spee..

Scatter Chart란, 분산/분포도를 표현해주는 차트입니다.분포되는 그래프란 아래와 같은 차트를 의미합니다. ▼ [출처 : http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#scatter-basic] [출처 : http://www.mathsisfun.com/data/scatter-xy-plots.html] 차트 영역내에 포인트로 데이터를 표현하여 어느 영역에 집중이 되있는지 한눈에 알아보기 쉬운차트가 바로 'Scatter Chart' 입니다. 상단 이미지 중, 두번째 출처에서 제공하는 온도별 아이스크림 판매 데이터를 이용하여 한번 Scatter Chart를 생성해보도록 하겠습니다. 상단 데이터를 데이터 스토어에 담아 보도록 합니다...

지난 강좌에는 ExtJS에서 제공하는 센차차트에 대해서 간략하게 설명을 진행하였습니다. 2015/07/16 - [ExtJS] - ExtJS 기초강좌 25 - 차트 컴포넌트에 대한 간단소개 이어서 차트관련 스크립트를 include 후에 간단한 막대그래프를 출력을 해보도록 하겠습니다. 추가 INCLUDE 파일 1장부터 진행해오신 분들이시라면 기존 작업 한 웹프로젝트 내에 "packages" 라는 폴더내에 ExtJS 관련 테마 디렉토리들을 INCLUDE 해놓았을 것입니다. 만약 바로 검색해서 들어오신 분들이시라면 1장 연동부분을 참고해주세요 ▼2015/05/28 - [ExtJS] - ExtJS 기초강좌 1 - ExtJS 5.1 GPL 다운로드 및 연동하기 INCLUDE 해준 파일들 중 우리는 "sencha-c..

ExtJS에서 제공하는 차트그래프에 대해서 알아보도록 하겠습니다.이번장에서는 컴포넌트 출력관련 강좌가아닌, ExtJS에서 제공하는 센차차트(Sencha Chart)의 종류 및 중요한 config 속성에 대해서 간단하게 설명을 진행하고자 합니다. ExtJS에서 제공하는 차트의 종류는 아래와 같습니다. ▼Column ChartsBar ChartsLine ChartsArea ChartsScatter ChartsFinancial ChartsPie ChartsRadial ChartsGauge ChartsCombination Charts ExtJS 5.1버전부터 3D 차트 그래프가 추가가 되어 이전보다 화려한 그래프 표현이 가능합니다.차트관련 클래스는 2가지가 존재합니다. ▼Ext.chart.CartesianCha..

지난시간에 ExtJS 5.1 GPL 버전을 다운로드 받고 연동하는 법까지 해봤습니다. ▶ "ExtJS 기초강좌 1 - ExtJS 5.1 GPL 다운로드 및 연동하기" 보러가기 오늘은 ExtJS에서 제공하는 각종 다야한 테마들에 대해서 알아보도록 하겠습니다. 연동작업을 했을때 "packages"라는 폴더를 이용했었습니다. 이 "packages" 디렉토리를 들어가 보시면 하단과 같이 ext-theme-xxxx 와 같은 디렉토리들이 여러가지가 존재할 것입니다. ▶ 테마 폴더명 ext-theme-aria - 블랙 계열의 테마ext-theme-classic- 푸른계열의 클래식 테마ext-theme-classic-sandbox - 현재는 지원안하는 테마인듯...ext-theme-crisp - ExtJS 5부터 지원..

ExtJS 첫번째 무료 강좌를 시작해보도록 하겠습니다. ExtJS 프레임워크 다운로드를 하기 위해서는 센차 홈페이지를 방문하여 다운로드를 받으면 되겠습니다. 그러나 얼마전에 홈페이지 리뉴얼이 되는바람에 링크주소와 페이지들이 모두 바뀌었네요.. 30일 평가판버전을 받을 수 있는 버튼만 상단 메뉴부분에 존재하여 처음에는 "GPL 버전을 사이트에서 제거했나?"라는 생각을 가졌습니다. 하지만, 결국 GPL 버전을 찾아냈습니다.!! 센차쪽 라이센스는 모호한 부분이 많으므로 자세히 확인하신 후 실무에 사용하셔야 합니다. 저는 그냥 GPL버전으로 강좌를 진행하겠습니다. ▶ ExtJS 5.1 GPL 다운로드 바로가기 입력하신 메일주소로 센차측에서 보낸 메일이 날라올겁니다. "ext-5.1.1-gpl.zip" 압축파일을..