Quick Guide

Transcription

1

2 목차 1. 퀵스타트가이드... 5 스마트태그마법사... 5 데이터마법사... 6 API 와속성리스트... 6 사용자도구... 8 렌더링메쏘드지원 Chart FX 와 AJAX Chart FX 어플리케이션확장 도움말과지원받기 ClickOnce 배포 Chart FX 라이선스와배포 기술지원 갤러리타입 막대 (Bar) 차트 영역 (Area) 차트 파이 (Pie) 차트 도넛 (Doughnut) 차트 피라미드 (Pyramid) 차트 분산형 (Scatter) 차트또는 X/Y 차트 버블 (Bubble) 차트 레이다 (Radar) 차트와폴라 (Polar) 차트 서페이스 (Surface) 차트 파레토 (Pareto) 차트

3 콤비네이션 (Combination) 차트 데이터전달 시작하기 시리즈와포인트 시리즈순서재정렬 API 를사용한데이터전달 XML 을사용한데이터전달 Crosstab Data Provider 비즈니스오브젝트 (Business Objects) 데이터압축 (Data Compacting) 시각적속성 Contact US

4 4

5 새로운세대의 Chart FX 8은이전보다더욱스마트하고, 데이터분석중심으로새로운수준의웹어플리케이션과데스크톱어플리케이션을가져다줄것입니다. 앞으로소개될개발자를위한최고의데이터시각화및비즈니스인텔리전스도구로부터더많은새로운릴리즈에대한관심을기울여주길바랍니다. 본가이드는 3 장데이터전달 까지설명이되어있으며, 로부터구매한정품구매자 에게전체내용의퀵가이드를제공해드립니다. 1. 퀵스타트가이드 스마트태그마법사 Visual Studio 폼에차트컨트롤을드롭했을때, 컨트롤의오른쪽상단모서리에드롭다운메뉴의 스마트태그가나타납니다. 개발자가주로사용되는옵션과기능을빠르게접근할수있도록도와 줍니다. 5

6 데이터마법사 Chart FX 스마트태그마법사는데이터소스설정옵션을제공합니다. 그래서프로젝트에서데이 터베이스또는데이터셋을빠르게연결할수있습니다. API 와속성리스트 Visual Studio 객체모델을염두에두고만들어진새롭고강력한 API 를특징으로합니다. 오브젝트 와클래스들이인식하기쉽고코딩에용이하게되어있으므로이제복잡한기능들에접근하는것 이쉬워졌으며유저의 C# 또는 VB.NET 어플리케이션들에더욱빠르게통합할수있습니다. 예를들어, Y 축의 GridLines 설정을속성창에서색, 두께, 스타일등과같이설정할수있습니다. 6

7 또한, Chart FX 는더욱복잡한차트설정하기위한추가다이얼로그를제공합니다. 7

8 사용자도구 Toolbar 로부터최종사용자는추가적인코딩없이저장, 내보내기, 확대 / 축소그리고데이터를분 석할수있는다른기능들을사용할수있습니다. 아래와같이쉽게 Chart FX 스마트태그마법사로부터 Toolbar 를활성화할수있습니다. 8

9 차트안에트렌드와중요한요소를빠르게파악하기위한특징을갖고있습니다. 하이라이팅은최종사용자가마커위에마우스를오버할때적용됩니다. 참고 : 하이라이팅기능은윈폼어플리케이션그리고이미지렌더링인 ASP.NET 어플리케이션에만 가능합니다. 9

10 렌더링메쏘드지원 웹기반어플리케이션에대한대부분차트컴포넌트는보편적으로접근하기쉬운 PNG와 JPEG 처럼정적인이미지를만들고, 브라우저는서버로의라운드트립을요구하지않습니다. 하지만 Chart FX 포함한다른데이터시각화솔루션은여전히대부분의브라우저를지원하고, 프린트출력과드릴다운과툴팁처럼제한된상호대화를제공합니다. 아래와같이스마트태그마법사로부터 Chart FX 렌더링메쏘드를선택할수있습니다. 10

11 Chart FX 와 AJAX 차트가새로운데이터로자동업데이트되며, 변화된부분의차트만이업데이트되기때문에전체페이지를갱신하지않아도됩니다. 이진파일을다운로드받을필요가없으므로차트들은완전한보안성을가지게됩니다. 이를통해최종사용자는어떠한플랫폼의어떠한브라우저와도상호작용이가능하며어플리케이션을폭넓은사용자계층에서사용할수있게만듭니다. Chart FX 8 은 AJAX 기술을사용하여이를강력한 DHTML 엔진에통합시킴으로써완전한상호반 응을가능케하고웹어플리케이션에서상태를지원하는차트이미지를생성합니다. Chart FX DHTML 엔진을이용하여개발자들은다음과같은일을할수있습니다 : - 어플리케이션을플랫폼에맞게작동시키지않고유지비용을발생시키는 ActiveX 또는.NET 컴 포넌트를다운로드받거나이를조정하고사용하는것을금지합니다. - 브라우저내에서이진파일을필요로하지않음으로인해완전한보안성을가지는차트들을배 포합니다. 11

12 - 기업에있는어떠한브라우저에도배포할수있는완전한유연성을유지하면서훨씬부드러운 사용자경험을제공하는확대및스크롤링을포함하는가장뛰어난 Chart FX 최종사용자기능을 지원하는드롭다운메뉴과함께완전한상호반응을지원하는툴바에접근할수있습니다. Chart FX 어플리케이션확장 Chart FX 8은또한표준화된확장성인프라스트럭처를갖고있습니다. 이는 Chart FX Extension 기능이더잘통합되고쉽게배포될수있음을의미합니다. 이들 Chart FX Extension 기능들은.NET 어셈블리들로서, Chart FX가재무, 통계, 맵등과같은종적요소들에빠르고효율적으로적용될수있도록해줍니다. 12

13 도움말과지원받기 샘플및리소스센터는흥미로운 Chart FX 주제들을다루는 Programmers Guide 레퍼런스뿐만아니라, Chart FX API와웹개발자들을위해특별히제작된인터넷레퍼런스, 그리고개발자가자신의어플리케이션에통합하여테스트할수있는풍부한실제샘플및차트 ( 와코드 ) 들을제공합니다. ClickOnce 배포 Chart FX 8 은 ClickOnce 배포를지원합니다. ClickOnce 배포는윈도우어플리케이션에대한쉬운 설치와업데이트를할수있습니다.. ClickOnce 배포가어떻게되는지에대한핵심시나리오는다음과같습니다.: - 개발자머신에서윈도우어플리케이션이웹사이트에게시됩니다. - 클라인트머신에서게시된웹사이트는윈도우어플리케이션설치하기위한옵션을제공합니다. - 클라이언트는자동적으로윈도우어플리케이션으로업데이트를받습니다. 어플리케이션을배포하기위해서는클라이언트머신에 Chart FX 런타임컴포넌트와.NET Framework 2.0 버전이설치되어야합니다. 13

14 Chart FX 라이선스와배포 스마트클라이언트어플리케이션 (Smart Client Applications) - 개발 (Development) Chart FX 8 윈도우폼의디자인-타임라이선스는개발자당라이선스를기반으로합니다. 라이선스동의문서에서는한 (1) 카피의라이선스는한대의컴퓨터에서만사용하도록허용하고있습니다. 만약, 한대이상의컴퓨터에디자인-타임라이선스가필요한경우에는추가적인개발라이선스 (Additional Development Seat License) 를추가되는개발컴퓨터댓수만큼확보해야합니다. 개발라이선스는 Studio FX Premium Subscription에포함되어있습니다. - 배포 (Deployment) Chart FX 8을이용하여작성한윈도우폼이나스마트클라이언트어플리케이션의배포는 Chart FX 라이센스동의에명시된 " 재배포가능코드 - Redistributable Code" 조건만만족시키면별도의로열티없이배포가능합니다. ASP.NET 2.0 어플리케이션 - 개발 (Development) Chart FX 8 ASP.NET 디자인-타임컴포넌트의라이선스는개발자당라이선스를기반으로합니다. 라이선스동의문서에서는한 (1) 카피의라이선스는한대의컴퓨터에서만사용하도록허용하고있습니다. 만약, 한대이상의컴퓨터에디자인-타임라이선스가필요한경우에는추가적인개발라이선스 (Additional Development Seat License) 를추가되는개발컴퓨터댓수만큼확보해야합니다. 14

15 - 배포 (Deployment) ASP.NET 어플리케이션에서 Chart FX 8가사용될때는서버당라이선스를기반으로하며, 서버의 CPU개수는상관하지않습니다. 기본적인패키지에는한 (1) 개의운영서버라이선스가포함되어있습니다. 만약 1대이상의운영서버에배포가필요한경우에는추가되는운영서버의개수만큼추가운영서버라이선스 (Additional Production Server License) 를확보해야합니다. 배포 (Deployment) 라이선스동의에명시된 " 재배포가능코드 - Redistributable Code" 조건만만족시키면별도의로열티없이배포가능합니다. 기술지원 Studio FX Subscriptions(Support 또는 Premium) 을통해기술지원을받을수있습니다. 소프트웨어사업부기술지원팀 / support@yessdata.com /

16 2. 갤러리타입 막대 (Bar) 차트 // RELEVANT CODE chart1.gallery = Gallery.Bar; // END RELEVANT CODE PopulateDataCarProduction(chart1); chart1.titles.add(new TitleDockable("Vehicles Production by Month")); // RELEVANT CODE chart1.gallery = Gallery.Bar; // END RELEVANT CODE PopulateDataBirthVariation(chart1); chart1.legendbox.dock = DockArea.Top; chart1.legendbox.contentlayout = ContentLayout.Center; chart1.legendbox.plotareaonly = false; 16

17 chart1.legendbox.titles.add(new TitleDockable("Birth Yearly Variation by Gender")); chart1.legendbox.marginx = 100; chart1.axisy.title.text = "Percentage (%)"; chart1.axisx.grids.major.visible = true; chart1.axisx.style = AxisStyles.Centered; chart1.axesstyle = AxesStyle.YAxisOnly; // RELEVANT CODE chart1.gallery = Gallery.Gantt; // END RELEVANT CODE PopulateDataBirthVariation(chart1); chart1.legendbox.dock = DockArea.Top; chart1.legendbox.contentlayout = ContentLayout.Center; chart1.legendbox.plotareaonly = false; chart1.legendbox.titles.add(new TitleDockable("Birth Yearly Variation by Gender")); chart1.legendbox.marginx = 100; chart1.axisy.title.text = "Percentage (%)"; chart1.axisx.grids.major.visible = true; chart1.axisx.style = AxisStyles.Centered; chart1.axesstyle = AxesStyle.YAxisOnly; 17

18 막대폭과포인트사이의공간제어 chart1.gallery = Gallery.Bar; chart1.allseries.volume = 100; Bar bar = (Bar) chart1.galleryattributes; bar.intraseriesgap = 0; 18

19 막대오버래핑 (Overlapping) chart1.gallery = Gallery.Bar; chart1.data.series = 3; chart1.series[0].volume = 20; chart1.series[1].volume = 50; chart1.series[2].volume = 80; Bar bar = (Bar) chart1.galleryattributes; bar.overlap = true; 스택차트 ( 수직스택차트 ) chart1.gallery = Gallery.Bar; chart1.data.series = 3; chart1.data.points = 10; chart1.allseries.stacked = Stacked.Normal; 19

20 수평스택차트 chart1.gallery = Gallery.Gantt; chart1.data.series = 5; chart1.data.points = 5; chart1.allseries.stacked = Stacked.Normal; chart1.series[3].stacked = false; 20

21 스택 100% chart1.gallery = Gallery.Bar; chart1.data.series = 3; chart1.data.points = 10; chart1.allseries.stacked = Stacked.Stacked100; 초기값이있는막대차트 chart1.gallery = Gallery.Gantt; chart1.data.series = 1; chart1.data.points = 6; chart1.data.yfrom[0] = 7; chart1.data.y[0] = 27; chart1.data.yfrom[1] = 28; chart1.data.y[1] = 43; chart1.data.yfrom[2] = 16; chart1.data.y[2] = 65; chart1.data.yfrom[3] = 36; chart1.data.y[3] = 59; chart1.data.yfrom[4] = 33; chart1.data.y[4] = 62; chart1.data.yfrom[5] = 14; chart1.data.y[5] = 50; 21

22 chart1.allseries.multiplecolors = true; 3D 막대차트 chart1.gallery = Gallery.Bar; chart1.data.series = 3; chart1.data.points = 10; chart1.allseries.stacked = Stacked.Normal; chart1.view3d.enabled = true; 22

23 chart1.gallery = Gallery.Bar; chart1.data.series = 3; chart1.data.points = 10; chart1.view3d.enabled = true; chart1.view3d.anglex = 45; chart1.view3d.cluster = true; 23

24 참고 : 3 차원의데이터를그리거나 XYZ 축과같이표현하는 3 차원을의미하는것이아닙니다. Chart FX 는 2 차원의데이터를항상사용할것입니다. 다시말해, 3D 는단순한시각적효과입니다. 클러스터 (Clustered) 차트 chart1.gallery = Gallery.Bar; chart1.allseries.barshape = BarShape.Cylinder; chart1.data.series = 2; chart1.data.points = 10; chart1.view3d.enabled = true; chart1.view3d.cluster = true; chart1.series[0].text = "Value 1"; chart1.series[1].text = "Value 2"; chart1.plotareamargin.right = 50; Z 축라벨 chart1.gallery = Gallery.Bar; chart1.allseries.barshape = BarShape.Cylinder; chart1.data.series = 3; chart1.data.points = 10; chart1.view3d.enabled = true; 24

25 chart1.view3d.cluster = true; chart1.view3d.anglex = 30; chart1.view3d.angley = 30; chart1.series[0].text = "Value 1"; chart1.series[1].text = "Value 2"; chart1.series[2].text = "Value 3"; chart1.plotareamargin.right = 50; 막대모양변경 chart1.gallery = Gallery.Bar; chart1.allseries.barshape = BarShape.Cylinder; chart1.allseries.stacked = Stacked.Normal; chart1.data.series = 3; chart1.data.points = 10; 25

26 chart1.gallery = Gallery.Bar; chart1.allseries.barshape = BarShape.Cylinder; chart1.allseries.stacked = Stacked.Normal; chart1.data.series = 3; chart1.data.points = 10; 26

27 chart1.gallery = Gallery.Cube; chart1.data.series = 3; chart1.data.points = 10; 막대이미지마커샘플 27

28 인구피라미드샘플 영역 (Area) 차트 chart1.gallery = Gallery.Area; chart1.data.series = 1; chart1.data.points = 10; 28

29 chart1.gallery = Gallery.Area; chart1.data.series = 3; chart1.data.points = 10; 스택영역 29

30 chart1.gallery = Gallery.Area; chart1.data.series = 3; chart1.data.points = 10; chart1.view3d.enabled = true; chart1.allseries.stacked = Stacked.Stacked100; chart1.gallery = Gallery.Area; chart1.data.series = 5; chart1.data.points = 6; chart1.view3d.enabled = true; chart1.view3d.cluster = true; chart1.view3d.anglex = 65; 30

31 chart1.gallery = Gallery.Area; chart1.data.series = 1; chart1.data.points = 9; chart1.data.yfrom[0] = 7; chart1.data.y[0] = 27; chart1.data.yfrom[1] = 28; chart1.data.y[1] = 43; chart1.data.yfrom[2] = 16; chart1.data.y[2] = 65; chart1.data.yfrom[3] = 36; chart1.data.y[3] = 59; chart1.data.yfrom[4] = 33; chart1.data.y[4] = 62; chart1.data.yfrom[5] = 14; chart1.data.y[5] = 50; chart1.data.yfrom[6] = 80; chart1.data.y[6] = 100; chart1.data.yfrom[7] = 45; chart1.data.y[7] = 60; chart1.data.yfrom[8] = 55; chart1.data.y[8] = 95; 31

32 chart1.gallery = Gallery.CurveArea; chart1.data.series = 3; chart1.data.points = 10; chart1.gallery = Gallery.Area; chart1.data.series = 1; 32

33 chart1.data.points = 9; chart1.data.y[0, 0] = -20; chart1.data.y[0, 1] = 40; chart1.data.y[0, 2] = 97; chart1.data.y[0, 3] = -100; chart1.data.y[0, 4] = 18; chart1.data.y[0, 5] = -38; chart1.data.y[0, 6] = -10; chart1.data.y[0, 7] = 38; chart1.data.y[0, 8] = -14; chart1.view3d.enabled = true; chart1.gallery = Gallery.CurveArea; chart1.data.series = 3; chart1.data.points = 10; chart1.view3d.enabled = true; chart1.view3d.cluster = true; 33

34 chart1.gallery = Gallery.Area; chart1.data.series = 3; chart1.data.points = 10; chart1.allseries.stacked = Stacked.Normal; 34

35 선형 (Line) 차트 chart1.gallery = Gallery.Lines; chart1.data.series = 3; chart1.data.points = 10; chart1.gallery = Gallery.Lines; chart1.data.series = 3; chart1.data.points = 10; chart1.allseries.markershape = MarkerShape.None; chart1.allseries.line.style = System.Drawing.Drawing2D.DashStyle.Dash; 35

36 chart1.gallery = Gallery.Lines; chart1.data.series = 1; chart1.data.points = 9; chart1.allseries.markershape = MarkerShape.None; chart1.data.y[0] = -100; chart1.data.x[0] = -4; chart1.data.y[1] = -80; chart1.data.x[1] = -3; chart1.data.y[2] = -75; chart1.data.x[2] = -2; chart1.data.y[3] = -30; chart1.data.x[3] = -1; chart1.data.y[4] = -35; chart1.data.x[4] = 0; chart1.data.y[5] = 15; chart1.data.x[5] = 1; chart1.data.y[6] = 32; chart1.data.x[6] = 2; chart1.data.y[7] = 57; chart1.data.x[7] = 3; chart1.data.y[8] = 100; chart1.data.x[8] = 4; 36

37 참고 : 대부분라인차트는타임라인또는날짜기반의 X 축에따릅니다. 추가적인정보는 Axis 섹 션을참고합니다. 마커모양과스타일 chart1.gallery = Gallery.Lines; chart1.data.series = 5; chart1.data.points = 6; chart1.series[0].markershape = MarkerShape.None; chart1.series[1].markershape = MarkerShape.Rect; chart1.series[2].markershape = MarkerShape.Diamond; chart1.series[3].markershape = MarkerShape.Triangle; chart1.series[4].markershape = MarkerShape.Circle; 37

38 커브 (Curve) 차트 chart1.gallery = Gallery.Curve; chart1.data.series = 2; chart1.data.points = 10; chart1.allseries.markershape = MarkerShape.None; 38

39 스텝라인 (Step Lines) 차트 chart1.gallery = Gallery.Step; chart1.data.series = 2; chart1.data.points = 10; chart1.allseries.markershape = MarkerShape.None; 리본 (Strip) 차트 chart1.gallery = Gallery.Lines; chart1.data.series = 2; chart1.data.points = 10; chart1.view3d.enabled = true; 39

40 chart1.gallery = Gallery.Lines; chart1.data.series = 2; chart1.data.points = 10; chart1.view3d.enabled = true; chart1.view3d.anglex = -45; 40

41 참고 : 선형차트는다른차트타입과결합할수있습니다. 예를들면, 막대차트와영역차트를콤 비네이션차트를만들수있습니다. 파이 (Pie) 차트 chart1.gallery = Gallery.Pie; chart1.data.series = 2; chart1.data.points = 5; 파이차트분해 chart1.gallery = Gallery.Pie; chart1.data.series = 1; chart1.data.points = 4; chart1.allseries.pointlabels.visible = true; chart1.data.y[0] = 10; 41

42 chart1.data.y[1] = 90; chart1.data.y[2] = 60; chart1.data.y[3] = 120; Pie pie = (Pie)chart1.GalleryAttributes; pie.explodingmode = ExplodingMode.All; chart1.gallery = Gallery.Pie; chart1.data.series = 1; chart1.data.points = 3; chart1.allseries.pointlabels.visible = true; chart1.view3d.enabled = true; chart1.points[2].separateslice = 20; 42

43 스택파이차트 chart1.data.series = 2; chart1.data.points = 3; chart1.gallery = Gallery.Doughnut; Pie doughnut = (Pie) chart1.galleryattributes; doughnut.stacked = true; doughnut.doughnutthickness = 10; SeriesAttributes series = chart1.series[0]; series.volume = 100; // Make first series (Outside Doughnut) bigger series = chart1.series[1]; series.gallery = Gallery.Pie; series.volume = 80; 43

44 도넛 (Doughnut) 차트 chart1.gallery = Gallery.Doughnut; chart1.data.series = 1; chart1.data.points = 5; chart1.allseries.pointlabels.visible = true; 44

45 chart1.gallery = Gallery.Doughnut; chart1.data.series = 1; chart1.data.points = 5; chart1.allseries.pointlabels.visible = true; chart1.view3d.enabled = true; 45

46 도넛차트분해 chart1.gallery = Gallery.Doughnut; chart1.data.series = 1; chart1.data.points = 4; chart1.data.y[0] = 10; chart1.data.y[1] = 90; chart1.data.y[2] = 60; chart1.data.y[3] = 120; chart1.view3d.enabled = true; chart1.points[2].separateslice = 40; 피라미드 (Pyramid) 차트 chart1.gallery = Gallery.Pyramid; chart1.data.series = 1; chart1.data.points = 10; chart1.view3d.enabled = true; 46

47 chart1.gallery = Gallery.Pyramid; chart1.data.series = 1; chart1.data.points = 10; chart1.gallery = Gallery.Pyramid; chart1.data.series = 2; 47

48 chart1.data.points = 10; chart1.view3d.enabled = true; 참고 : 가장중요한항목은일반적으로피라미드의상단에배치되어있기때문에, 그것은데이터 배열의첫번째항목이피라미드의상단에표시된다는점이중요합니다. 데이터배열순서를확 인해야합니다. 역피라미드 chart1.view3d.enabled = true; chart1.data.series = 1; chart1.data.points = 5; chart1.gallery = Gallery.Pyramid; Pyramid pyramid = (Pyramid) chart1.galleryattributes; pyramid.style = PyramidStyle.InvertedPyramid; pyramid.separation = 10; 48

49 분산형 (Scatter) 차트또는 X/Y 차트 chart1.gallery = Gallery.Scatter; chart1.data.series = 2; chart1.data.points = 20; 49

50 chart1.gallery = Gallery.Scatter; chart1.data.series = 1; chart1.data.points = 10; chart1.data.x[0] = -100; chart1.data.y[0] = 5; chart1.data.x[1] = 12; chart1.data.y[1] = 19; chart1.data.x[2] = -36; chart1.data.y[2] = 100; chart1.data.x[3] = 8; chart1.data.y[3] = 91; chart1.data.x[4] = -43; chart1.data.y[4] = 87; chart1.data.x[5] = 93; chart1.data.y[5] = -22; chart1.data.x[6] = -50; chart1.data.y[6] = -100; chart1.data.x[7] = -77; chart1.data.y[7] = 82; chart1.data.x[8] = 7; chart1.data.y[8] = -37; chart1.data.x[9] = 100; chart1.data.y[9] = 34; 50

51 chart1.data.series = 2; chart1.data.points = 10; chart1.data.y[0, 0] = 2.62; chart1.data.y[0, 1] = 10.82; chart1.data.y[0, 2] = 24.87; chart1.data.y[0, 3] = 18.71; chart1.data.y[0, 4] = 27.74; chart1.data.y[0, 5] = 56.47; chart1.data.y[0, 6] = 48.59; chart1.data.y[0, 7] = 57.54; chart1.data.y[0, 8] = 82.12; chart1.data.y[0, 9] = 88.89; chart1.data.y[1, 0] = -4.03; chart1.data.y[1, 1] = 6.49; chart1.data.y[1, 2] = 16.24; chart1.data.y[1, 3] = 26.17; chart1.data.y[1, 4] = 35.9; chart1.data.y[1, 5] = 45.91; chart1.data.y[1, 6] = 55.65; chart1.data.y[1, 7] = 65.65; chart1.data.y[1, 8] = 75.39; chart1.data.y[1, 9] = 85.39; chart1.series[0].gallery = Gallery.Scatter; 51

52 chart1.series[1].gallery = Gallery.Lines; 버블 (Bubble) 차트 버블차트는분산형차트와매우유사합니다. 두개의축 (XY 축 ) 에정의된버블이위치되고, 추가 적으로버블의크기를반영한차트입니다. chart1.gallery = Gallery.Bubble; chart1.data[0, 0] = 70.55; chart1.data[1, 0] = 77.47; chart1.data[0, 1] = 53.34; chart1.data[1, 1] = 45; chart1.data[0, 2] = 57.95; chart1.data[1, 2] = 55.07; chart1.data[0, 3] = 28.96; chart1.data[1, 3] = 81.45; chart1.data[0, 4] = 30.19; 52

53 chart1.data[1, 4] = 60.90; chart1.gallery = Gallery.Bubble; chart1.data[0, 0] = 70.55; chart1.data[1, 0] = 77.47; chart1.data[0, 1] = 53.34; chart1.data[1, 1] = 45; chart1.data[0, 2] = 57.95; chart1.data[1, 2] = 55.07; chart1.data[0, 3] = 28.96; chart1.data[1, 3] = 81.45; chart1.data[0, 4] = 30.19; chart1.data[1, 4] = 60.90; chart1.allseries.multiplecolors = true; 53

54 chart1.gallery = Gallery.Bubble; chart1.data[0, 0] = 70.55; chart1.data[1, 0] = 77.47; chart1.data[0, 1] = 53.34; chart1.data[1, 1] = 45; chart1.data[0, 2] = 57.95; chart1.data[1, 2] = 55.07; chart1.data[0, 3] = 28.96; chart1.data[1, 3] = 81.45; chart1.data[0, 4] = 30.19; chart1.data[1, 4] = 60.90; chart1.view3d.enabled = true; 54

55 기본값으로, 버블최대의크기는차트의 20% 가될것입니다. 버블의가장큰크기는버블클래스 의속성에액세스하여축의퍼센트로제어할수있습니다. Bubble bubble = (Bubble) chart1.galleryattributes; bubble.maximumbubblesize = 30; 버블차트샘플 55

56 레이다 (Radar) 차트와폴라 (Polar) 차트 레이다차트 chart1.data.series = 2; chart1.data.points = 5; chart1.gallery = Gallery.Radar; // BEGINNOSHOW chart1.plotareamargin.top = 8; chart1.plotareamargin.bottom = 8; chart1.plotareamargin.left = 8; chart1.plotareamargin.right = 8; // ENDNOSHOW 56

57 chart1.data.series = 2; chart1.data.points = 5; chart1.gallery = Gallery.Radar; Radar radar = (Radar)chart1.GalleryAttributes; radar.fillarea = true; radar.circular = true; Color color0 = chart1.series[0].color; Color color1 = chart1.series[1].color; chart1.series[0].color = Color.FromArgb(128, color0); chart1.series[1].color = Color.FromArgb(128, color1); // BEGINNOSHOW chart1.plotareamargin.top = 8; chart1.plotareamargin.bottom = 8; chart1.plotareamargin.left = 8; chart1.plotareamargin.right = 8; // ENDNOSHOW 57

58 chart1.data.series = 2; chart1.data.points = 5; chart1.gallery = Gallery.Radar; Radar radar = (Radar)chart1.GalleryAttributes; radar.showlines = false; // BEGINNOSHOW chart1.plotareamargin.top = 8; chart1.plotareamargin.bottom = 8; chart1.plotareamargin.left = 8; chart1.plotareamargin.right = 8; // ENDNOSHOW 58

59 폴라차트 chart1.data.series = 2; chart1.data.points = 5; chart1.gallery = Gallery.Radar; Radar polar = (Radar)chart1.GalleryAttributes; polar.circular = true; chart1.data.y[0,0] = 2; chart1.data.y[0,1] = 10; chart1.data.y[0,2] = 24; chart1.data.y[0, 3] = 18; chart1.data.y[0, 4] = 27; chart1.data.x[0, 0] = 18; chart1.data.x[0, 1] = 49; chart1.data.x[0, 2] = 128; chart1.data.x[0, 3] = 213; chart1.data.x[0, 4] = 315; chart1.data.y[1, 0] = 25; chart1.data.y[1, 1] = 93; chart1.data.y[1, 2] = 46; chart1.data.y[1, 3] = 7; chart1.data.y[1, 4] = 63; chart1.data.x[1, 0] = 58; chart1.data.x[1, 1] = 19; 59

60 chart1.data.x[1, 2] = 171; chart1.data.x[1, 3] = 246; chart1.data.x[1, 4] = 321; // BEGINNOSHOW chart1.plotareamargin.top = 8; chart1.plotareamargin.bottom = 8; chart1.plotareamargin.left = 8; chart1.plotareamargin.right = 8; // ENDNOSHOW chart1.data.series = 2; chart1.data.points = 5; chart1.gallery = Gallery.Polar; Radar polar = (Radar)chart1.GalleryAttributes; polar.circular = true; polar.fillarea = true; Color color0 = chart1.series[0].color; Color color1 = chart1.series[1].color; chart1.series[0].color = Color.FromArgb(128, color0); chart1.series[1].color = Color.FromArgb(128, color1); chart1.data.y[0,0] = 2; chart1.data.y[0,1] = 10; chart1.data.y[0,2] = 24; chart1.data.y[0, 3] = 18; 60

61 chart1.data.y[0, 4] = 27; chart1.data.x[0, 0] = 18; chart1.data.x[0, 1] = 49; chart1.data.x[0, 2] = 128; chart1.data.x[0, 3] = 213; chart1.data.x[0, 4] = 315; chart1.data.y[1, 0] = 25; chart1.data.y[1, 1] = 93; chart1.data.y[1, 2] = 46; chart1.data.y[1, 3] = 7; chart1.data.y[1, 4] = 63; chart1.data.x[1, 0] = 58; chart1.data.x[1, 1] = 19; chart1.data.x[1, 2] = 171; chart1.data.x[1, 3] = 246; chart1.data.x[1, 4] = 321; // BEGINNOSHOW chart1.plotareamargin.top = 8; chart1.plotareamargin.bottom = 8; chart1.plotareamargin.left = 8; chart1.plotareamargin.right = 8; // ENDNOSHOW 61

62 chart1.data.series = 2; chart1.data.points = 5; chart1.gallery = Gallery.Polar; Radar polar = (Radar)chart1.GalleryAttributes; polar.circular = true; polar.closed = false; chart1.allseries.markershape = MarkerShape.None; chart1.data.y[0,0] = 2; chart1.data.y[0,1] = 10; chart1.data.y[0,2] = 24; chart1.data.y[0, 3] = 18; chart1.data.y[0, 4] = 27; chart1.data.x[0, 0] = 18; chart1.data.x[0, 1] = 49; chart1.data.x[0, 2] = 128; chart1.data.x[0, 3] = 213; chart1.data.x[0, 4] = 315; chart1.data.y[1, 0] = 25; chart1.data.y[1, 1] = 93; chart1.data.y[1, 2] = 46; chart1.data.y[1, 3] = 7; chart1.data.y[1, 4] = 63; chart1.data.x[1, 0] = 58; chart1.data.x[1, 1] = 19; chart1.data.x[1, 2] = 171; chart1.data.x[1, 3] = 246; chart1.data.x[1, 4] = 321; // BEGINNOSHOW chart1.plotareamargin.top = 8; chart1.plotareamargin.bottom = 8; chart1.plotareamargin.left = 8; chart1.plotareamargin.right = 8; // ENDNOSHOW 62

63 서페이스 (Surface) 차트 chart1.gallery = Gallery.Surface; chart1.view3d.enabled = true; int nseries = 20; int npoints = 20; chart1.data.series = nseries; chart1.data.points = npoints; for (int i = 0; i < nseries; i++) { for (int j = 0; j < npoints; j++) { chart1.data[i, j] = Math.Sin((((i * 2) * Math.PI) / (nseries-1))) * Math.Cos(((((j + 5) * 2) * Math.PI) / (npoints-1))) * 100; } } chart1.series[0].color = Color.Yellow; chart1.series[0].alternatecolor = Color.Red; 63

64 서페이스차트데이터전달 서페이스차트에서시리즈수는차트의깊이를의미하고, 포인트의수는차트의폭을의미합니다. 만약 10 개포인트와시리즈당 10 개포인트가있는 3D 서페이스차트에서모든값이 0 인경우, 다음과같습니다.: 64

65 예를들어그림에서포인트와시리즈값을변경하면, 다음과같을결과를얻을수있습니다.: 서페이스차트에색설정 첫번째시리즈색부터 AlternateColor 까지점차적으로변경합니다. 비록값을설정했을지라도 Y 축 (-20, 20) 에대한스케일은충분하지않을수있습니다. 이경우, Y 축의 Step 을변경합니다. 예들들면, 그림에서 Step 을 10 으로설정하더라도변화가충분하지않 습니다. 그러나 MinorStep 을 2 로설정하여더욱자세하게변화를표현할수있습니다. 65

66 등고선 (Contour) 차트 등고선차트는서페이스차트를위에서본차트입니다. chart1.gallery = Gallery.Contour; chart1.view3d.enabled = true; int nseries = 20; int npoints = 20; chart1.data.series = nseries; chart1.data.points = npoints; for (int i = 0; i < nseries; i++) { for (int j = 0; j < npoints; j++) { chart1.data[i, j] = Math.Sin((((i * 2) * Math.PI) / (nseries-1))) * Math.Cos(((((j + 5) * 2) * Math.PI) / (npoints-1))) * 100; } } chart1.series[0].color = Color.Yellow; chart1.series[0].alternatecolor = Color.Red; 66

67 파레토 (Pareto) 차트 파레토효과는품질개선에도작동합니다.: 문제의 80% 는 20% 의원인때문에생깁니다. 파레토차트는기본 Y 축에값으로막대차트를표시하고선형차트는자동으로계산하고각각의 막대차트에서누적비율로 Chart FX 가보여줍니다. chart1.data.series = 1; chart1.data.points = 5; chart1.gallery = Gallery.Pareto; chart1.data.y[0] = 80; chart1.data.y[1] = 30; chart1.data.y[2] = 20; chart1.data.y[3] = 12; chart1.data.y[4] = 5; 67

68 참고 : Chart FX 는당신을위해데이터를정렬하지않습니다. 그러므로파레토차트에데이터를전 달하기전에데이터를정렬해야합니다. 콤비네이션 (Combination) 차트 콤비네이션차트를만들기위해서는 Series.Gallery 속성을사용하여여러시리즈차트에서각각의 시리즈마다갤러리타입을지정합니다. 콤비네이션차트는 2D 뿐만아니라 3D 도지원합니다. chart1.data.series = 2; chart1.data.points = 5; chart1.series[0].gallery = Gallery.Bar; chart1.series[1].gallery = Gallery.Area; chart1.data[0, 0] = 45000; chart1.data[0, 1] = ; chart1.data[0, 2] = ; 68

69 chart1.data[0, 3] = ; chart1.data[0, 4] = ; chart1.data[1, 0] = 5; chart1.data[1, 1] = 70; chart1.data[1, 2] = 85; chart1.data[1, 3] = 95; chart1.data[1, 4] = 70; chart1.axisy.min = 0; chart1.axisy.max = ; chart1.axisx.grids.major.visible = false; chart1.axisy.grids.major.visible = false; chart1.axisy2.min = 0; chart1.axisy2.max = 100; chart1.axisy2.grids.major.visible = false; chart1.series[1].axisy = chart1.axisy2; string[] year = { "2008", "2009", "2010", "2011", "2012", "2013"}; double[] low2 = { 2.5, 3.1, 2.9, 3.5, 3.8, 3.7 }; double[] industryrange = { 3, 4.1, 4.4, 5.5, 6.3, 6.7 }; double[] average = { 2.75, 3.6, 3.65, 4.5, 5.05, 5.2 }; double[] ourcompany = { 2.6, 3.5, 3.8, 4.8, 5.2, 6 }; ArrayList chartdatalist = new ArrayList(); chartdatalist.add(year); 69

70 chartdatalist.add(low2); chartdatalist.add(industryrange); chartdatalist.add(average); chartdatalist.add(ourcompany); ListProvider provider = new ListProvider(chartDataList); chart1.datasource = provider; // Create datafields StringDataField stringdatafield = new StringDataField(); stringdatafield.datapath = "Field1"; stringdatafield.displayname = "Year"; chart1.datasourcesettings.datafields.add(stringdatafield); NumericDataField numericdatafield = new NumericDataField(); numericdatafield.datapath = "Field2"; numericdatafield.displayname = "Low"; chart1.datasourcesettings.datafields.add(numericdatafield); numericdatafield = new NumericDataField(); numericdatafield.datapath = "Field3"; numericdatafield.displayname = "Industry Range"; chart1.datasourcesettings.datafields.add(numericdatafield); numericdatafield = new NumericDataField(); numericdatafield.datapath = "Field4"; numericdatafield.displayname = "Average"; chart1.datasourcesettings.datafields.add(numericdatafield); numericdatafield = new NumericDataField(); numericdatafield.datapath = "Field5"; numericdatafield.displayname = "Our Company"; chart1.datasourcesettings.datafields.add(numericdatafield); chart1.data.series = 3; chart1.axisx.bindings.label = chart1.datasourcesettings.datafields[0]; chart1.series[0].bindings.yfrom = chart1.datasourcesettings.datafields[1]; chart1.series[0].bindings.y = chart1.datasourcesettings.datafields[2]; chart1.series[1].bindings.y = chart1.datasourcesettings.datafields[3]; chart1.series[2].bindings.y = chart1.datasourcesettings.datafields[4]; 70

71 chart1.series[0].gallery = Gallery.Area; chart1.series[1].gallery = Gallery.Lines; chart1.series[2].gallery = Gallery.Lines; chart1.series[2].pointlabels.visible = true; // Remove this to see series names chart1.axisx.grids.major.visible = false; chart1.axisy.grids.major.visible = false; chart1.view3d.enabled = true; chart1.data.series = 2; chart1.data.points = 300; Random r = new Random(); DateTime datetime = DateTime.Today; for (int i = 0; i < chart1.data.series; i++) { for (int j = 0; j < chart1.data.points; j++) { chart1.data.x[i, j] = datetime.adddays(j * 1).ToOADate(); chart1.data.y[i, j] = (i == 0)? r.nextdouble() * : r.nextdouble() * 1.5; } } chart1.axisx.labelsformat.format = AxisFormat.Date; chart1.axisx.labelsformat.customformat = "MMM-dd-yyyy"; 71

72 chart1.axisx.grids.major.visible = false; chart1.series[0].gallery = Gallery.Lines; chart1.series[0].markershape = MarkerShape.None; chart1.series[1].gallery = Gallery.Area; chart1.series[1].axisy = chart1.axisy2; chart1.recalculatescale(); chart1.axisy2.max = 3; chart1.axisy2.visible = false; //chart1.axisx.step = 15; chart1.axisx.labelangle = 90; chart1.data.series = 2; chart1.data.points = 5; chart1.series[0].gallery = Gallery.Bar; chart1.series[1].gallery = Gallery.Curve; chart1.data[0, 0] = 45000; chart1.data[0, 1] = ; chart1.data[0, 2] = ; chart1.data[0, 3] = ; chart1.data[0, 4] = ; chart1.data[1, 0] = 5; chart1.data[1, 1] = 70; chart1.data[1, 2] = 85; chart1.data[1, 3] = 95; 72

73 chart1.data[1, 4] = 70; chart1.axisy.min = 0; chart1.axisy.max = ; chart1.axisx.grids.major.visible = false; chart1.axisy.grids.major.visible = false; chart1.axisy2.min = 0; chart1.axisy2.max = 100; chart1.axisy2.grids.major.visible = false; chart1.series[1].axisy = chart1.axisy2; chart1.data.series = 2; chart1.data.points = 10; chart1.data[0, 0] = 2.62; chart1.data[0, 1] = 10.82; chart1.data[0, 2] = 24.87; chart1.data[0, 3] = 18.71; chart1.data[0, 4] = 27.74; chart1.data[0, 5] = 56.47; chart1.data[0, 6] = 48.59; chart1.data[0, 7] = 57.54; chart1.data[0, 8] = 82.12; chart1.data[0, 9] = 88.89; chart1.data[1, 0] = -4.03; chart1.data[1, 1] = 6.49; 73

74 chart1.data[1, 2] = 16.24; chart1.data[1, 3] = 26.17; chart1.data[1, 4] = 35.9; chart1.data[1, 5] = 45.91; chart1.data[1, 6] = 55.65; chart1.data[1, 7] = 65.65; chart1.data[1, 8] = 75.39; chart1.data[1, 9] = 85.39; chart1.series[0].gallery = Gallery.Scatter; chart1.series[1].gallery = Gallery.Lines; chart1.series[1].markershape = MarkerShape.Rect; chart1.axisx.grids.major.visible = false; chart1.axisy.grids.major.visible = false; chart1.data.series = 2; chart1.data.points = 4; chart1.data[0, 0] = -10; chart1.data[0, 1] = 34; chart1.data[0, 2] = 42; chart1.data[0, 3] = 16; chart1.data[1, 0] = 45; chart1.data[1, 1] = 22; chart1.data[1, 2] = -27; chart1.data[1, 3] = 38; 74

75 chart1.gallery = Gallery.Bar; chart1.axesstyle = AxesStyle.Frame3D; chart1.series[1].gallery = Gallery.Lines; chart1.points[0, 0].Color = Color.AliceBlue; chart1.points[0, 1].Color = Color.AntiqueWhite; chart1.points[0, 2].Color = Color.Beige; chart1.points[0, 3].Color = Color.Blue; chart1.points[1, 0].Color = Color.Brown; chart1.points[1, 1].Color = Color.CadetBlue; chart1.points[1, 2].Color = Color.Chocolate; chart1.points[1, 3].Color = Color.Crimson; chart1.allseries.border.visible = true; chart1.allseries.border.effect = BorderEffect.Opposite; chart1.axisx.grids.major.visible = false; chart1.axisy.grids.major.visible = false; 75

76 3. 데이터전달 시작하기 데이터를전달하기위해서는 ChartFX.Data.DLL 라이브러리를추가하여야합니다. 데이터전달방식은 API, 데이터베이스, 텍스트, XML, 배열, 컬렉션이있습니다. 시리즈와포인트 2 개의값과 1 개의시리즈로막대차트를보여줍니다. int nseries = 1; int npoints = 2; chart1.gallery = Gallery.Bar; chart1.data.series = nseries; chart1.data.points = npoints; chart1.data[0,0] = 45; chart1.data[0,1] = 75; 76

77 2 개의시리즈와 2 개의포인트로차트를그린결과입니다. int nseries = 2; int npoints = 2; chart1.gallery = Gallery.Bar; chart1.data.series = nseries; chart1.data.points = npoints; chart1.data[0,0] = 25; chart1.data[0,1] = 40; chart1.data[1,0] = 20; chart1.data[1,1] = 35; chart1.series[0].text = "Female"; chart1.series[1].text = "Male"; 77

78 색과같은속성을수정하여시리즈를구분할수있습니다. chart1.data.series = 2; chart1.data.points = 5; chart1.series[0].color = Color.DarkGreen; 78

79 시리즈순서재정렬 SendToBack() 과 BringToFront() 메쏘드를사용하여시리즈순서를재정렬할수있습니다. chart1.series[1].bringtofront(); //moves the second series to the front 추가적으로 Remove() 와 Insert() 메쏘드를사용하여시리즈의순서를재정렬할수있습니다. //this code swaps the fourth series with the third series SeriesAttributes series3 = chart1.series[2]; chart1.series.remove(chart1.series[2]); chart1.series.insert(3,series3); 가끔원래순서로시리순서를리셋할필요가있는경우 RestOrder() 메쏘드를사용합니다. chart1.series.resetorder(); API 를사용한데이터전달 예를들어, 만약두번째시리즈의세번째포인트에 40 의값을설정하기원한다면, seriesindex 는 1 이고, pointindex 는 2 입니다. 그리고 value 는 40 입니다. chart1.data.series = numberofseries; chart1.data.points = numberofpoints; chart1.data[seriesindex,pointindex] = value; 축리스케일링 (Rescaling) 차트에대한데이터가로드될때, 기본값으로축의 Min, Max 값이자동으로범위에맞게설정됩 니다. 이동작은 AutoScale 속성으로제어됩니다. 같은차트에서새로운값이로드된다면, Chart FX 는다시축의 Min, Max 값이조정될것입니다. 단값이증가될때만적용되지만감소될때는 79

80 적용되지않습니다. 새로운데이터설정으로재계산될 Min 과 Max 를강제적으로하기위해, 새 로운데이터가로딩되기전에축 ResetScale 메쏘드를호출합니다. chart1.axisx.resetscale(); chart1.axisy.resetscale(); 포인트숨기기 chart1.data.series = 1; chart1.data.points = 5; chart1.data[0, 0] = 30; chart1.data[0, 1] = 45; chart1.data[0, 2] = Chart.Hidden; chart1.data[0, 3] = 60; chart1.data[0, 4] = 50; 차트에서특정포인트숨기는예제입니다. 80

81 차트에서존재하는값을변경하기 chart1.data[seriesindex,pointindex] = value; XML 을사용한데이터전달 XmlDataProivider 오브젝트에의해 Load 메쏘드가지원됩니다. 이기능을사용하려면먼저새로 운 XmlDataProvider 오브젝트를만들어야하고, 다양한 Load 를메쏘드를통해 XML 데이터를로 드합니다. 그리고마지막으로 DataSource 속성에설정을합니다. chart1.datasourcesettings.datasource = mtdatasource; 81

82 XML data provider 를사용하여데이터를전달할때, 테이블과동일하게데이터는컬럼 (columns) 과로우 (row) 로전달되어집니다. 다음 XML 타입의포맷데모는 Chart FX 로부터데이터를불러오 기 (import) 와내보내기 (export) 를하기위해사용됩니다. <?xml version= 1.0?> <CHARTFX> <COLUMNS> <COLUMN NAME="Product" TYPE="String"/> <COLUMN NAME="Q1" TYPE="Integer" DESCRIPTION= 1ST QTR /> <COLUMN NAME="Q2" TYPE="Integer"/> <COLUMN NAME="Q3" TYPE="Integer"/> <COLUMN NAME="Q4" TYPE="Integer"/> </COLUMNS> <ROW Product="ChartFX 98" Q1="9200" Q2="7835" Q3="10245" Q4="8762"/> <ROW Product="ChartFX IE 3.5" Q1="14350" Q2="11233" Q3="16754" Q4="987"/> <ROW Product="ReportFX" Q1="12398" Q2="7654" Q3="5678" Q4="9087"/> <ROW Product="Image Toppings" Q1="8742" Q2="12358" Q3="14321" Q4="8702"/> </CHARTFX> 여기서각각의컬럼에대한정의는 COLUMNS 노드로감싸집니다. 컬럼은선택적으로차트의범례라벨로사용되는 DESCRIPTION 속성을포함할수있습니다. XML 을통해속성설정 Chart FX 는데이터를불러오기위한 XML 지원뿐만아니라시각적인속성에도사용할수있습니 다. chart1.import(fileformat, myfile); chart1.export(fileformat, myfile); 정규적인스키마는정의되어있지않습니다. 그러나각각의속성은엘리먼트 (element) 이고, 대부분의하위오브젝트 ( 시리즈, 포인트, 축등 ) 에대한속성들은하위엘리먼트로나타냅니다. 시리즈또는포인트속성을커스터마이징할때, 값은아래의 XML 파일과같이하위엘리먼트대신 SERIES 엘리먼트사이에 XML 속성으로써나타냅니다. <CHARTFX> <VOLUME>35</VOLUME> 82

83 <TITLES> <TITLE> <TEXT>My First Chart</TEXT> </TITLE> </TITLES> <SERLEGBOXOBJ> <DOCKED>Left</DOCKED> <DRAWINGAREA>true</DRAWINGAREA> <FONT> <NAME>Verdana</NAME> </FONT> <ALIGNMENT>Center</ALIGNMENT> </SERLEGBOXOBJ> <SERLEGBOX>True</SERLEGBOX> <SERLEG> <LEGEND>Sales</LEGEND> <LEGEND>Projected</LEGEND> </SERLEG> <SERIES> <SERIES index="0"> <BORDER>True</BORDER> <GALLERY>LINES</GALLERY> </SERIES> <SERIES index="1"> <BORDER>True</BORDER> <GALLERY>Lines</GALLERY> </SERIES> </SERIES> <POINT> <POINT series="1" point="2"> <COLOR>Red</COLOR> <MARKERSHAPE>Rect</MARKERSHAPE> </POINT> </POINT> <STRIPES> <STRIPE> <AXIS>0</AXIS> <TO>20</TO> <FROM>30</FROM> </STRIPE> </STRIPES> </CHARTFX> 83

84 Crosstab Data Provider 이테이블에서보여주는것으로데이터는일반적으로 Tabular 포맷입니다. 일반적으로개발자는원하는포맷을생성하기위해수동적으로포맷을조작하는데많은시간을 소비를해왔을것입니다. Chart FX 는 Crosstab data provider 를제공하여이문제를해결합니다. Crosstab data provider 로위의데이터를다음과같은포맷으로손쉽게변경할수있습니다. 다음차트는 Chart FX 에데이터를전달할때 Tabular 포맷테이블을생성할것입니다. 84

85 대부분의경우에는생성하기에적절하지않는차트입니다. PRODUCTNAME 필드정보가각행에대해반복되고, 다른분기의다양한제품에대한분기매출을비교하기위해, 완전히떨어진페이지에서수를일치해야합니다. 또한, 그것은특정제품에대한판매되지않는어떤분기를쉽게간과될수있습니다. Crosstab data provider를사용하여원본테이블은쉽게수정된테이블을생성재구성할수있습니다. Chart FX로읽을때, 수정된테이블은보다효과적으로데이터를표시합니다. 85

86 Crosstab Data Provider 기능 Crosstab Data Provider 를효율적으로사용하기위한중요한두가지측면이있습니다.: - Crosstab Data Provider 는 Chart FX 로어떻게통합합니까? - columnar 데이터로 tabular 데이터를변경하기위해 Crosstab 을어떻게설정합니까? Chart FX 7 의디자인의확장성을활용하여, Crosstab Data Provider 는 data provider 로써 Chart FX 와함께사용할수있는별도의컴포넌트입니다. Crosstab Data Provider 의입력은배열, 콜렉션, 텍스트파일 XML 또는데이터베이스처럼 Chart FX data provider 를지원하는폼이되어야합니다. Tabular Data 를 Columnar Data 로변경하기위한 Crosstab Data Provider 설정 Crosstab Data Provider 는 Tabular 데이터를 Columnar 데이터로변경하기위한규칙이필요합니다. 이들규칙들은어떻게 tabular 포맷에각각의컬럼이사용되는지정의합니다. 컬럼은 DataType 속성을사용하여다음의옵션으로정의될것입니다. Column Heading: 시리즈범례 ( 고유값 ) Row Heading: 포인트라벨 IniValue: 초기값 Value: 값 Not Used: 해당칼럼을사용하지않습니다. 참고 : RowHeading 은연속적으로정렬되어야할필요가있는 CrosstabDataProvider 에전달하는것 을기록합니다. RowHeading 값이연속적인지확인을해야합니다, 그렇지않으면차트는원하지 않는결과를표시하여그룹화할값을이해할수없을것입니다. 다른 Crosstab Data Provider 속성 86

87 DataSource: DataSource 속성은외부 data provider 에서정보를검색하기위해 Crosstab provider 를지시하는데사용됩니다. 설정한외부 data provider 는 TextProvider, XmlDataProvider, ListProvider 등처럼유효한 data provider 로설정되어야합니다. DateFormat: DataFormat 속성은 Row Heading 날짜로써컬럼이명시될때 Chart FX 는어떻게날 짜포맷을정할것인지를지시하는데사용됩니다. 만약 DateFormat 이명시되지않는다면, 포맷은 Culture 속성으로부터설정될것입니다. 기본값으로 Culture 속성은 en-us 입니다. NullColumheading: NullColumnHeading 속성은 null column heading 일때 string 값을설정하는 데 Chart FX 를지시하는데사용됩니다. ct.nullcolumnheading = "N/A"; Separator: Separator 속성은 DataType 으로한개이상의 Row Heading 이설정될때포인트라벨 이될두개이상의필드사이에구분자를설정합니다. XVaule: XValue 속성은 Chart FX 가 X 축라벨대신에 XVaule 로단일 row heading 을사용하도록지 시합니다. True 에대한이속성설정은 Chart FX 가 X 축라벨대신에 Xvalues 로 row heading 값을 구성하도록지시를할것입니다. 비즈니스오브젝트 (Business Objects) 소개 비즈니스오브젝트는일반적으로런타임정보조작에중요한키역할을재생하는오브젝트입니다. 현실세계에서객체는매일서로상호작용하는것과마찬가지로, 복잡한어플리케이션에서오브젝트는각각의비즈니스오브젝트를관리하는규칙에따라정보를다루고전달합니다. 현실세계에서 Person은제공하기위한패키지가있을수있으며그는가능한배달회사중하나에패키지를다루도록지시합니다. 만약우리는비즈니스오브젝트를통해이프로세스를복제한다면, 우리는 Person 오브젝트의인스턴스, 오브젝트 Package 오브젝트의인스턴스그리고ㄷ 87

88 DeliveryCompany 오브젝트의다양한인스턴스를가질것입니다. 아래와같이배달회사규칙은 가능성이가장높은 Person 오브젝트의메쏘드로구현될것입니다. aperson.deliverypackage( Companies.FedEx ); DeliveryPackpage 메쏘드는페키지를제공하는데필요한모든필요한트랜잭션과규칙을캡슐화합니다. 예를들어, 메쏘드는데이터베이스의수정, 이메일알림등에포함될수있습니다. 이제우리는비즈니스객체가무엇인지일반적으로어떻게사용하는지명확해졌습니다. 하나는쉽게어떻게이개발모델이데이터조작하는기존의특별한의미로부터훨씬뛰어난방법을볼수있습니다. 비즈니스오브젝트를사용하여유연성, 일관성, 용이성, 데이터캡슐화, 높은수준의기대뿐만아니라다른여러혜택을제공하는여러장점을갖고있습니다. 어플리케이션에서비즈니스오브젝트를사용하는더많은정보에대해우리는 Microsoft 표준과그들의웹사이트를방문하는것이좋습니다. Chart FX 로 Business Object 사용 다양한비즈니스오브젝트를이용하는최근어플리케이션에서비즈니스오브젝트의콘텐츠는차 트를통해표현되어야하는시대가될것입니다. 위의예를계속하면, 먼저아래에정의된속성 Name 과 Age 가존재하는매우기본적인 Person 오브젝트를가정할수있습니다.: class Person { private string m_name; private int m_age; public Person( string name, int age ) { Name = name; Age = age; } public string Name { get { return m_name; } 88

89 } set { m_name = value; } } public int Age { get { return m_age; } set { m_age = value; } } 지금이샘플어플리케이션에서우리는 Person 오브젝트의배열을갖고회사의고용인을말합니다. 예를들어, 우리는차트에구성하고싶습니다. 필요한구성을하기위한 Chart의 API 값을통해통합하는대신에당신은간단히아래와같이 Person 오브젝트자체를데이터바인더할수있습니다. //Create a sample array of Person objects for demo Person[] people = new Person[3]; people[0] = new Person( "Mike", 30 ); people[1] = new Person( "Ivan", 35 ); people[2] = new Person( "Ivan Sr.", 60 ); chart1.datasource = people; chart1.datasourcesettings.fields.add( new FieldMap( "Name", FieldUsage.RowHeading ) ); chart1.datasourcesettings.fields.add( new FieldMap( "Age", FieldUsage.Default ) ); 주의, 우리는 XML 또는 DataSet과같이다른데이터로차트에오브젝트를간단히바인딩합니다. 이시점에서그러나, 당신은차트에중요한 Field를지정하기위해 DataSourceSettings를사용할필요가있습니다. 만약 Person 오브젝트가많은속성을갖고있다면, 차트에서관심이있는속성부분을지정하는방법이될것입니다. Field를추가할때, FieldMap을지정해야합니다. FieldMap 은 RowHeading, Label 등과같이전형적인차트의요소와속성을연결할수있습니다. 89

90 데이터압축 (Data Compacting) 10 개의막대를 2 개씩그룹화하여 5 개의막대로표현할수있는방법에대한예제는다음과같습 니다. 기본값으로, Chart FX 는 CompacktFormulas.Min 을사용합니다. 여기는 1 개의시리즈와 10 개의포인트를갖는기본차트입니다. chart1.data.series = 1; chart1.data.points = 10; chart1.gallery = Gallery.Bar; int i; for (i = 0; i < 10; i++) { chart1.data[0, i] = 10 + i; } 다음의코드를적용한후의결과의차트는두개의막대가하나의막대로요약된데이터압축제 공하고두막대의최소 Y 값의새로운막대를생성합니다. 90

91 chart1.data.series = 1; chart1.data.points = 10; chart1.gallery = Gallery.Bar; int i; for (i = 0; i < 10; i++) { chart1.data[0, i] = 10 + i; } chart1.data.compact( 2 ); 참고 : 당신은아래와같이또다른미리정의된공식을사용하려는경우 compact 를호출하기위 해수식을먼저지정해야합니다. chart1.data.y.compactformula = CompactFormulas.Max; chart1.data.compact( 5 ); 사용자정의수식 Chart FX 는특정하게다루는함수에대한계산을넘기기위해개발자에게방법을제공합니다. 위의예를계속한다면, 지금아래의코드는 Min 을계산하는대신에압축될값을합합니다. 91

92 //This is assigning a new delegate of type CompactFormulaHandler Chart.Data.Y.CompactFormula = new CompactFormulaHandler( SumFormula ); //This code is the handler for the delegate. private double SumFormula( IDataArray data, int seriesindex, int startpoint, int endpoint ) { int sum; for( int i = startpoint; i <= endpoint; i++ ) sum += data[ seriesindex, i ]; } return sum; 여기에서, 차트는이전에압축된차트와비슷하지만대신에최소값을표시합니다. 지금은합압축 막대를표시합니다. 92

93 4. 시각적속성 본가이드는 3 장데이터전달 까지설명이되어있으며, 로부터구매한정품구매자 에게전체내용의퀵가이드를제공해드립니다. 93

94 12. Contact US 1 Sales( 영업문의 ) 웹사이트 : TEL: FAX: sales@yessdata.com 2 Technical Support( 기술지원문의 ) Chart FX 커뮤니티 : TEL: support@yessdata.com 94