Dojo Line Chart Example Code
|
<html> <head> <script src='dojo-release-1.9.1/dojo/dojo.js' ></script> <script> require([ "dojox/charting/Chart", "dojox/charting/plot2d/Lines", "dojox/charting/axis2d/Default", "dojo/domReady!" ], function (Chart) { var chart = new Chart("test"); chart.addPlot("default", {type: "Lines"}); chart.addAxis("x"); chart.addAxis("y", {vertical: true}); chart.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]); chart.render(); }); </script> </head> <body> <div id="test" style="width: 250px; height: 150px;"></div> </body> </html> |
Table 1 Dojo Line Chart Code
Code 설명
우선 Chart를 그리기 위해 Chart module과 Chart type중 Line을 쓰기 위해 Line chart, 그리고 Chart에 쓰일 축을 위해 axis2d를 불러온다.
chart 생성을 하기 위해 해당 div id값을 넣어준다. addPlot으로 Chart를 default 값, Chart type을 Line으로 설정한다. 그리고 Chart에 대한 x, y축을 추가하고, 그릴려고 하는 데이터 값을 addseries로 나타낸 뒤 render 함수로 뿌려준다.
Dojo chart Instruction
우선 Chart를 생성하기 위해 var chart = new Chart("test"); 를 적었는데 첫 번째 인자인 "test"는 html body에 뿌려줄 div id값이고 두 번째 인자로 chart에 대한 title과 title에 대한 위치 그리고 title의 Gap, Font, color를 지정할 수 있다. 다음으로 chart를 그리기 위해 기본적인 Fuction인 addPlot()은 2개의 argument를 가진다. 첫 번째 argument는 name, 두 번째는 option object이다. name의 경우 서로 다른 chart type을 겹치게 그리고 싶을 경우 쓰인다. 예를 들어 하나의 chart안에 Line type과 Stack Area type을 겹치게 그리고 싶을 경우 서로 다른 name을 줘야 한다. option object는 chart의 type을 결정한다. type의 종류에 대해서는 다음과 같다.
|
<!--[if !supportLists]-->· <!--[endif]-->Areas – Area under data line(s) will be filled <!--[if !supportLists]-->· <!--[endif]-->Bars – Horizontal bars. <!--[if !supportLists]-->· <!--[endif]-->ClusteredBars – Horizontal bars with clustered data sets <!--[if !supportLists]-->· <!--[endif]-->ClusteredColumns – Vertical bars with clustered data sets <!--[if !supportLists]-->· <!--[endif]-->Columns – Vertical bars <!--[if !supportLists]-->· <!--[endif]-->Grid – For adding a grid layer to you chart <!--[if !supportLists]-->· <!--[endif]-->Lines – Basic line chart <!--[if !supportLists]-->· <!--[endif]-->Markers – Lines with markers <!--[if !supportLists]-->· <!--[endif]-->MarkersOnly – Markers, sans lines <!--[if !supportLists]-->· <!--[endif]-->Pie – Goes great with punch! <!--[if !supportLists]-->· <!--[endif]-->Scatter – Cooler name for MarkersOnly <!--[if !supportLists]-->· <!--[endif]-->Stacked – Data sets charted in relation to the previous data set. <!--[if !supportLists]-->· <!--[endif]-->StackedAreas – Stacked data sets with filled areas under chart lines <!--[if !supportLists]-->· <!--[endif]-->StackedBars – Stacked data sets with horizontal bars <!--[if !supportLists]-->· <!--[endif]-->StackedColumns – Stacked data sets with vertical bars <!--[if !supportLists]-->· <!--[endif]-->StackedLines – Stacked data sets using lines |
Table 2 chart type의 종류
option object의 경우 그래프의 type이외에 shadow를 넣거나, 그래프에 mark를 찍거나, tension으로 그래프를 부드럽게 만드는 등 여러가지 option을 줄 수 있다. 자세한 사항은http://www.sitepen.com/blog/2012/11/09/a-beginners-guide-to-dojo-charting-with-amd-part-1-of-2/를 참고하면 된다.
를 나타내주고 있다. 다른 비슷한 옵션으로는
includeZero가 있다. includeZero를 설정할 경우 눈금의 최소값이 0부터 시작한다. 혹은 min : 0 를 써서 최소값이 0부터 시작하게 할 수도 있다. 다른 옵션으로는 축에 label을 붙인다거나 눈금에 색깔을넣거나 font 등을 지정할 수 있다. 기타 옵션은 http://www.sitepen.com/blog/2012/11/09/a-beginners-guide-to-dojo-charting-with-amd-part-2-of-2/ 참고 하길 바란다.
addSeries()의 argumnet는 name, data array, options object이다. name은 data array에 있는 value들을 토대로 만들 그래프 이름이고, data array는 data 배열이다. 세번째 인자인 option object중 첫 번째 option은 stroke이다. stroke안에서는 color나 width로 색깔이나 선의 굵기를 조절할 수 있다. 두 번째 option은 fill로 그래프 면적에 대해 색깔을 채울 수 있다. 세 번째 option은 marker로 그래프에서 value을 특정 표시로 좀 더 잘 보이게 할 수 있다. marker의 경우 세모, 네모, 동그라미와 custom style로 정의가 가능하다. addSeries에 관한 자세한 사항도 마찬가지로 위의 링크를 참고하길 바란다.
결과 화면
Figure 1 Table 1 결과 화면
'Dojo > Chart' 카테고리의 다른 글
| 5. Dojo Pie & Animation Chart (0) | 2013.08.08 |
|---|---|
| 4. Dojo ClusteredColumns & Animation Chart (0) | 2013.08.08 |
| 3. Dojo Column Chart & Chart Theme Setting (0) | 2013.08.08 |
| 2. Dojo Area Chart & 두 개의 그래프 그리기 (0) | 2013.08.08 |