웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 duskan@pusan.ac.kr Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI Component 로.NET 기반의다양한사용자인터페이스를제공한다. 그중에서도특히 Chart 에대하여 Chart 의종류에따라다양한기능을가진라이브러리를제공하기때문에웹기반 Tool 과같은전문적인정보를다루는웹페이지에서 ComponetOne 에서제공하는 Chart 를이용하여보다쉽게사용자에게시각화된결과를제공할수있다. 본논문에서는이러한 ComponentOne 에서제공하는 Chart 의종류를알아보고각각의 Chart 에기능에대해소개한다. 그리고 ASP.NET 기반의 ComponentOne 의장점과단점에대해논의할것이다. Keywords:ComponentOne, ASP.NET, Chart, Web Page UI Tool 1 서론 웹페이지개발을위한라이브러리중하나인 ComponentOne은.NET 언어를기반으로하여다양한환경에서사용자인터페이스를위한다양한 Component를제공한다. 그중웹페이지개발을위해 ASP.NET, ActiveX, Silverlight 환경에서동작하는라이브러리를제공한다. 또한 ComponentOne은다양한종류의 Chart에대해여러기능을제공하고있어웹에서 Chart를통해어떠한결과를보여줄경우제공되는 Component들을이용하여보다쉽게개발이가능하다. 앞서보고서에서는이러한 Component의설치방법과기본적인사용방법에대해설명하고 Line Chart를이용하여간단한예제프로그램을실행해보았다. 본보고서에서는앞에언급하지못한 ComponentOne의여러 Chart의종류를알아보고각각의 Chart의기능에대해소개한다. 그후 ComponentOne 사용의장점과고려해보아야할사항에대해논의하도록한다. 2 Chart ComponentOne 에서는다양한종류의 Chart 에대한 Component 를제공한다. 이장에서는 Chart 의 Data 를관리하는 Series 에대해설명하고각 Chart 별로주요기능과특징에대해소개한다. 1
ComponentOne에서제공되는 Chart의종류는다음과같다. 1. Line Chart 2. Bar Chart 3. Bubble Chart 4. Pie / Donut Chart 5. Scatter Ploat Chart 6. Composite Chart 앞서보고서에서예제를통해 LineChart 의기능에대해서설명하였기때문에본보고서에서는 Line Chart 의기능에대한설명은생략하였다.[1] 2.1 Data Input ComponentOne에서제공되는 Chart의경우 Chart의종류에따라 Input값이달라지거나 Option 의종류가다른정도의차이는있으나, 모든 Chart에서 Series와 SeriesList를이용하여 Chart 에서표현할 Data를제어한다. Series는 Chart에들어갈하나의항목에대한 Data를저장하는 Class로 Chart의종류에따라앞에접두어가붙는다. PieSeries를제외한나머지 Series에서는 Data가 X,Y로나누어 Array형태로저장되며, PieSeries에서는단하나의 Data가저장된다. 이렇게 Data를가지고있는 Series 객체들은각각의 Chart안에있는 SeriesList에의해관리된다. Series하나당하나의항목에대한값들이저장되기때문에 SeriesLiset에여러가지 Series를추가할경우하나의 Chart에서여러개항목들을동시에확인할수있다. 2.2 Bar Chart Bar Chart( 막대그래프 ) 는 Chart중가장많이사용하며, 대중적인 Chart로같은 BarChart이라도 Chart의사용용도에따라그림 1에서처럼여러가지형식으로출력이가능하다. 이러한 Bar Chart의종류는다음과같은 Option에의해조절할수있다. - Horizontal = true/false (default = true) - Stacked = true/false (default = false) - Is100Percent = true/false (default = false) Horizontal는그래프의방향을결정한다. 기본값은 true로되어있어따로값을지정하지않는다면가로방향으로그래프가그려진다. 해당 Option을 false로바꾸면그래프를세로로바꿀수있다. Stacked는그림 1의 c와 d 에서처럼누적막대그래프를나타내는데사용되는 Option 이다. Is100Percent는그림 1의 d에서처럼 100% 누적막대그래프 (100%Stack bar chart) 를그리는 Option으로기본적으로 false로지정되어있다. 이를이용하여투표비율, 남여성비비율등을표시할수있다. 2
그림 1: BarChart 의 Option 에따라크게 4 가지형태의 BarChart 를작성할수있다. (a)simplechart (b)horigontal=false (c)stacked=true (d)stacked=true, Is100Percent=true 2.3 Bubble Chart 시장분석과같이특정다수의대상에대해비교가필요한경우 ComponentOne의 Bubble Chart 를이용하여표현이가능하다. Input Data에는 X와 Y이외에분포의정도를나타내는 Y1 값을 double 배열을이용하여추가적으로설정해주어야한다. 또한 Bubble Chart는 - Axies.X.Orign - Axies.Y.Orign 와같은옵션을이용하여 X축과 Y축의위치를설정할수있는데이를통해그림 2의 (b) 에서처럼양수뿐만이아닌, 음수영역에서의분포도효과적으로표시할수있다. BubbleChart에서필요한경우에는 Marker 를변경해서사용할수있다. 기본적으로 Box, Circle, Cross, Diamond, InvertedTri, Tri 6개의 Marker가기본적으로제공된다. BubbleChart에임의의 Marker를사용할경우에는 BubbleChartSymbol Type에서 - Index : 바꾸려는 Marker의 Index 선택 - Url : 바꾸려고하는 Symbol Image의경로설정옵션을통해값을설정한후 Series의 Marker에해당 BubbleChartSymbol 변수를설정하여변경 3
그림 2: (a)simplechart (b)bubble 그래프를통해음수영역에서값표시 (c)marker 형태변경 (d) 임의의 Symbol 을 Marker 로지정 할수있다. 2.4 Pie/Donut Chart ComponentOne에서는그림 3처럼전체에대해각항목의비율, 각항목간의비율차이등을한눈에알수있는 Pie Chart( 원그래프 ) 를제공한다. Pie Chart에서는 Data Input시각항목별로하나씩 Series를입력한다. 즉 Series의 Data가 X와 Y로나누어지지않으며, Data 값역시배열형태가아닌 double 변수값을설정한다. Pie Chart에서는 - Radius - InnerRadius Option을이용하여 Chart의형태를수정할수있다. Radius의경우 Chart 전체의반지름을설정하는 Option으로 Chart의크기를설정한다. 또한 InnerRadius은안의빈공간의크기를설정하는 Option으로이 Option을이용하여 Pie Chart( 원그래프 ) 뿐만이아니라 Donut Chart( 도넛그래프 ) 형태로 Chart를표현할수있다. 또한 Pie Chart에서 - Easing 4
그림 3: 기본 Pie Chart(a) 와 Radius 와 InnerRadius 속성을이용하여만든 Donut Chart(b) - Duration - Enabled 과같은 Option을이용하여 MouseOver, SeriesTransition( 값변경 ) 시실행되는 Animation을제어할수있다. Duration은 Animation이진행되는시간정보를설정할수있으며 Enabled는 Animation 실행여부를설정할수있는 Option이다. Easing은모션효과제어를위한 Option 으로 ChartEasing에서제공하는기능을사용하여설정가능하다. Easing의종류와기능은 http://easings.net/ 에그래프를이용하여각모션의효과를설명하고있으므로위링크를참조하면된다.[2] 2.5 Scatter Ploat Chart Scatter Ploat Chart는 Data가 Chart에나타나는형태를보고상관관계를유추하는데매우효과적인그래프이다. Series에 X와 Y값을배열형태로저장하면 Chart의해당부분에 Marker를뿌려준다. 2.6 Composite Chart Composite Chart는앞서언급한여러종류의 Chart를하나의 Chart에나타낼수있게하는 Chart이다. CompositeSeries에의해 Data에관리되며, CompositeSeries의 Type 속성을이용하면자신이원하는형태로 Chart가출력된다. 또한서로다른 Type을가지는 CompositeSeries를여러개선언하여 Composite Chart에추가함으로써여러종류의 Chart형식을하나의 Chart에표현할수있다. Type을설정할때에 Bar Chart는그래프의방향에따라 Column, Bart 두가지형식으로나뉘어져있으며, Pie Chart를나타내기위해서는 CompositeSeries의 PieSeriesList 속성에 PieSeries 값을추가하여야한다. 5
그림 4: Composite Chart 3 결론 ComponentOne에서제공되는여러 Component들에대해확인하고알아보았다. ComponentOne 은각각의 Component를 html 코드뿐만아니라아닌 C# 코드를이용하여수정할수있기때문에웹프로그래밍에익숙하지않은개발자라하더라도, 웹구조만잘잡는다면보다익숙한 C# 언어를통해각각의컴포넌트를쉽게제어할수있으며, 그반대도가능하다. 또한다양한종류의 Chart와많은기능들을제공하기때문에웹기반의 Tool 개발이각광받는지금, ComponentOne을이용한다면보다쉽고빠르게웹개발이가능하다. 또한 C# 을이용하여개발이가능하기때문에객체지향프로그래밍이가능하여코드의재사용등을통해웹페이지유지 / 보수및관리가간편하다. 다만 ASP.NET프로그래밍의경우 JSP나 PHP에비해개발자의선호가낮아 ASP 개발에대한정보가부족하여진입장벽이다소높으며서버사이드스크립트언어특성상다른서버측언어인 JSP, PHP와의호환이되지않기때문에다른언어로개발된페이지에 Componetone을적용하여사용하기힘들다는단점이있다. ComponentOne 을이용하여웹페이지를개발할경우이러한점을충분히고려하여개발을시작하여야한다. References [1] 권대건, 웹개발을위한 asp.net framework 기반의 componentone 사용법, 2013. 6
[2] Easing, easing 종류및동작설명, http://easings.net/. 7