ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다.
(YOUTUBE 채널 구독해주세요!!)
선형 그래프
선형 그래프는 정보를 직성르 통해서 연결된 일련의 데이터 포인트로 표시합니다.
꺽은 선형 그래프는 종종 일정기간 동안 데이터의 추세를 시각화하는데 사용되는 그래프입니다.
단건 표시하는 선형그래프 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를 선언
오늘 최종 코드 정리
| Ext.onReady(function(){ | |
| Ext.create("Ext.panel.Panel",{ | |
| width : 500, | |
| height : 500, | |
| renderTo : Ext.getBody(), | |
| layout : 'fit', | |
| items : [{ | |
| xtype : 'cartesian', | |
| innerPadding : 30, | |
| //2012 연령별 투표율 | |
| store : { | |
| fields : ['age','vote1','vote2'], | |
| data : [{ | |
| age : '20대', | |
| vote1 : 65.8, | |
| vote2 : 33.7 | |
| },{ | |
| age : '30대', | |
| vote1 : 66.5, | |
| vote2 : 33.1 | |
| },{ | |
| age : '40대', | |
| vote1 : 55.6, | |
| vote2 : 44.1 | |
| },{ | |
| age : '50대', | |
| vote1 : 37.4, | |
| vote2 : 62.5 | |
| },{ | |
| age : '60대', | |
| vote1 : 27.5, | |
| vote2 : 72.3 | |
| }] | |
| }, | |
| axes : [{ | |
| type : 'numeric', | |
| position : 'left', | |
| minimum : 0, | |
| maximum : 100, | |
| title : '(%)' | |
| },{ | |
| type : 'category', | |
| position : 'bottom' | |
| }], | |
| series : [{ | |
| type : 'line', | |
| marker : { | |
| radius : 4 | |
| }, | |
| smooth : true, | |
| xField : 'age', | |
| yField : 'vote1', | |
| label : { | |
| field : 'vote1', | |
| display : 'insideEnd' | |
| } | |
| },{ | |
| type : 'line', | |
| marker : { | |
| radius : 4 | |
| }, | |
| smooth : true, | |
| xField : 'age', | |
| yField : 'vote2', | |
| label : { | |
| field : 'vote2', | |
| display : 'insideEnd' | |
| } | |
| }] | |
| }] | |
| }) | |
| }); |
