Microsoft PowerPoint - CFXDSem ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - CFXDSem ppt"

갑수 도
6 years ago
Views:

1 Chart FX for.net 을이용한 Charting 프로그램 예쓰월드 YESSData.com 소프트웨어사업부기술지원팀

2 Agenda 회사소개 Chart FX for.net 특징 Chart FX for.net 사용 Gallery Types Passing Data Data Analysis Axis Handling Visual Attributes Chart FX Tools Extensions Contact Us

3 회사소개 YESSWorld 개발 S/W ( 컴포넌트, 서버군 ) 판매및기술지원 Software FX, Zero G, ComponentOne, Infragistics MS, Adobe 등의범용 S/W 판매 Hummingbird 솔루션개발 Software FX 1993 년설립 Chart 컴포넌트분야를선도.NET, Java, COM 등다양한플랫폼지원

4 Chart FX for.net 특징 예전 COM 버전보다유연하다. 다중축의개수제한이없음 강화된 UI 그라디언트, 안티앨리어싱 강력한마법사기능과편리한도움말 WebForm 과 WinForm 을모두지원 WinForm, Dev Lic., Product Lic. Server 기반의라이센스정책 / CPU 개수와무관 다양한출력형태.NET, Image, SVG, Flash 순수한.NET 컴포넌트.NET 환경을완벽하게지원

5 Chart FX for.net 특징 편리한 Help & Wizard VS.NET IDE 의동적도움말지원 직관적인인터페이스의마법사기능 다양한샘플소스제공 원하는차트를예제를선택후 Copy & Paste 로코드를삽입하면, 해당예제의차트가구현됩니다. 웹을통한지원 YESSData.com 의 Club 및기술지원 support.softwarefx.com/cfxnet 서비스팩기능을통한업데이트 뉴스그룹 news.softwarefx.com

6 Chart FX for.net 특징 Chart FX for.net 의 Resource Center

7 Chart FX for.net 특징 What s New in 6.2 Flash 지원 Multiple Pane 기능 차트내에서여러개의 Pane 사용이가능 Conditional Attributes 조건에따라서표현을달리함 개선된라벨링 다양한확장도구지원 Financial, Statistical, Map, OLAP Highlight 기능 가독성향상 6.0 에서무료 Upgrade 가능

8 Chart FX for.net 사용 Windows Forms 필요한사항.NET 개발환경 VS.NET 과같은개발툴.NET Framework VS.NET 에서 Chart FX for.net 사용 좌측도구상자의 Windows Forms 메뉴에서마우스우측버튼을선택하여나타나는팝업메뉴중항목추가 / 제거선택 Import (C#: Using) 문을사용하면코딩작성이편리해짐 제공되는데이터전달자를사용할경우에는 ChartFX.Data.Dll 을참조해야합니다. 배포 Windows Form 인경우배포로열티는무료입니다. 하지만, 라이센스를위반하지않는지라이센스동의를주의깊게읽을필요는있습니다. 단순한배포는 release 폴더를복사하는것으로도가능합니다. 상용패키지프로그램사용시는해당도움말참조

9 Chart FX for.net 사용 Web Forms 필요한사항.NET 개발환경 VS.NET 과같은개발툴.NET Framework IIS 제공되는 2 개의설치옵션 Dev. Seat 개발에필요한모든문서자료, 샘플이같이설치되며, 차트출력시개발버전문구가표시됨. Product Server 차트생성에필요한최소한의파일이설치됩니다. 실제운영되는서버에설치. 사용방법은도구상자에 Chart 를추가한후, 원하는위치에 Chart 를삽입하면됩니다.

10 Chart FX for.net 사용 Smart Devices Pocket Chart FX for.net.net 개발환경 VS.NET.NET Compact Framework 사용방법 SmartDevice 프로젝트에서도구상자에 Chart 를추가한후, 원하는위치에 Chart 를삽입하면됩니다. 배포시별도의배포라이센스가필요합니다. 기본적으로 25Seat 는제공됨 (2005 년 4 월기준 )

11 Chart FX for.net 사용 Single ASPX 페이지 기존의 ASP 와같은단일페이지방식 언제사용하나? GetHTMLData 메서드를이용한 Bit-Stream 방식구현시. Client-Side 의 Script 로.NET 컨트롤을제어하고자하는경우 VS.NET 에서지원되지않기때문에, 메모장과같은단순한에디터로작성해야합니다. VS.NET 2005(Widbey) 에서는지원될예정

12 Chart FX for.net 사용 Web 사용시참고사항 IIS,.NET Framework 필요 /License, /Download, /Temp 폴더생성 2003 Server 의경우수동으로설정해야합니다. 임시파일의제거유틸리티설정 AT 명령 ( 윈도우의스케줄기능 ) SfxRemove Temp 경로 시간 Bit Stream GetHtmlData 장점 파일생성없음 단점 코딩이불편함 (Single Paged aspx)

13 Chart FX for.net 사용 Single ASPX 작성예 : <%@ Page Language="C#"%> <%@ Import Namespace="SoftwareFX.ChartFX"%> <%@ Import Namespace="SoftwareFX.ChartFX.Internet.Server"%> <%@ Import Namespace="System.Drawing"%> Welcome to my first.aspx page that contains a chart: <% SoftwareFX.ChartFX.Internet.Server.Chart Chart1 = new SoftwareFX.ChartFX.Internet.Server.Chart(this); // Change the Gallery Type to Lines Chart1.Gallery = Gallery.Lines; // Change the background color Chart1.BackColor = Color.FromArgb(102,153,255); // Change the marker shape to Rectangles Chart1.MarkerShape = MarkerShape.Rect; %> // Generate a chart of 500x350 pixels <%= Chart1.GetHtmlTag("500","350",".NET")%>

14 Gallery Types 개요 Chart 와 Series 객체에서제공되는 Gallery 속성 Chart FX 에서기본적으로사용할수있는 Gallery : Area, Bar, Bubble, Candlestick, Contour, Cube, Curve, Curvearea, Doughnut, Gantt, HiLowClose, Lines, OpenHiLowClose, Pareto, Pie, Pyramid, Radar, Scatter, Step and Surface Statistical, MAP 등의확장팩을사용시더많은형태가제공됨 // 차트전체에적용 chart1.gallery = Gallery.Lines // 첫번째시리즈를라인으로설정하는 C# 코드 chart1.series[0].gallery = Gallery.Lines;

15 Gallery Types Combination Charts ' 첫번째시리즈를라인으로설정하는 VB 코드 chart1.series(0).gallery = Gallery.Lines // 첫번째시리즈를라인으로설정하는 C# 코드 chart1.series[0].gallery = Gallery.Lines;

16 Gallery Types XY Plots & Scatter COD.Values: Y 값전달을위해 COD.Xvalues: X 값전달을위해 Line, Curve, Area, Step Lines, Surface, Bubble, Contour and Curve Area, Scatter 등에서 XY 가능 // Scatter( 분산차트 ) 코드예 chart1.gallery = Gallery.Scatter; chart1.opendata(cod.values,2,3); chart1.opendata(cod.xvalues,2,3) chart1.value[i,j] = Y 값 ; chart1.xvalue[i,j] = X 값 ; chart1.closedata(cod.values); chart1.closedata(cod.xvalues);

17 Gallery Types XY Plots & Scatter 일반적인 Scatter( 분산 ) 차트의형태 // DataSet 을이용한 Scatter Or XY 차트구현시 // SELECT YValue,XValue FROM MyTable 이와같은쿼리일경우 Chart1.DataSourceSettings.DataType[0] = DataType.Value; Chart1.DataSourceSettings.DataType[1] = DataType.Xvalue;

18 Gallery Types Stacked 누적 2 가지형태 regular stacked, 100% Stacked ' Regular stacked Chart1.Stacked = Stacked.Normal ' or 100% stacked Chart1.Stacked = Stacked.Stacked100

19 Gallery Types Stacked 누적 다중누적시리즈단위로 2개의누적막대와 1개의커브 (VB.NET 코드 ) Chart1.Series(0).Gallery = Gallery.Bar 1번째시리즈는막대막대1 Dim series2 As SeriesAttributes = Chart1.Series(1) series2.gallery = Gallery.Bar series2.stacked = True 2번째는 1번째위에누적막대1 Chart1.Series(2).Gallery = Gallery.Bar 3번째시리즈막대막대2 Dim series4 As SeriesAttributes = Chart1.Series(3) series4.gallery = Gallery.Bar series4.stacked = True 3번째위에누적막대2 Dim series5 As SeriesAttributes = Chart1.Series(4) series5.gallery = Gallery.Bar series5.stacked = True 4번째위에누적막대2 Dim series6 As SeriesAttributes = Chart1.Series(5) series6.gallery = Gallery.Curve series6.color = Color.Black 6번째는커브 ' 스케일재계산 Chart1.RecalcScale()

20 Gallery Types Stacked 누적 다중누적시리즈단위로

21 Gallery Types Financial Chart OpenHighLowClose, HiLowClose, Candlestick ' 1개의 OHLC차트를위해서는 4개시리즈로채널 Open Chart1.OpenData(COD.Values, 4, 5) ' Code to set the data For j = 0 To npoints -1 Chart1.Value(OHLC.LOW,j) = Low value! Chart1.Value(OHLC.OPEN,j) = Open value! Chart1.Value(OHLC.CLOSE,j) = Close value! Chart1.Value(OHLC.HIGH,j) = Next j Chart1.CloseData(COD.Values) High value!

22 Gallery Types Financial Chart OHLC 차트

23 Gallery Types Surface & Contour Series 와 Point, 값을이용하여표현

24 Gallery Types Surface & Contour chart1.gallery = Gallery.Surface; // 모든값을 0 으로초기화 chart1.opendata(cod.values, 10, 10); for(int i = 0;i<10;i++){ for(int j = 0;j<10;j++){ chart1.value[i, j] = 0; } } //Now let's change Series 2, Point 2 to a value of 9 (Zero based indexes) chart1.value[1, 1] = 9; chart1.value[3, 2] = -18;

25 Gallery Types Surface & Contour

26 Gallery Types Gantt chart1.gallery =SoftwareFX.ChartFX.Gallery.Gantt; //Populating the chart1 chart1.opendata(softwarefx.chartfx.cod.values, 1, 9); chart1.opendata(softwarefx.chartfx.cod.inivalues, 1, 9); chart1.inivalue[0, 0] = 5; chart1.value[0, 0] = 25; chart1.legend[0] = "Act. 1"; chart1.inivalue[0, 1] = 25; chart1.value[0, 1] = 45; chart1.legend[1] = "Act. 2"; chart1.inivalue[0, 2] = 15; chart1.value[0, 2] = 80;

27 Gallery Types Bubble 2 가지값을동시에표현 - Y 값과풍선의크기 Chart1.Value(0,j) = 'Bubble Y Value Chart1.Value(1,j) = ' Bubble Size XY Bubble X, Y, 풍선의크기 3 가지값이필요 Chart1.Value(0,j) = 'Bubble Y Value Chart1.XValue(0,j) = 'Bubble X Value Chart1.Value(1,j) = ' Bubble Size Volume 속성으로풍선크기조정 가령풍선의값이 100 이라도 Volume 이 50 이면원래크기의 ½ 로보여짐

28 Gallery Types Bubble

29 Gallery Types Doughnut chart1.point[2].separateslice = 20; chart1.gallery = Gallery.Doughnut;

30 Gallery Types Statistical Chart FX Statistical 확장팩은통계 ( 회계 ) 분석기능을 Chart FX for.net 이갖도록합니다. BoxPlot, Histogram, FrequencyPolygon, Ogive 와 Regression 등의 Gallery 를제공합니다.

31 Gallery Types Statistical

32 Gallery Types Maps

33 Gallery Types Polar 무료로제공되는확장팩

34 Passing Data 다양한형태의데이터지원 API Database ADO.NET Text XML Arrays Collections Crosstab

35 Passing Data API 를이용한전달 Value 속성을이용하여전달 Chart1.Value[0,0] = 42; Value 속성은 OpenData 와 CloseData 메서드사이에서사용 Points 의개수를모를때.OpenData(COD.Values, 1, COD.Unknown) Hidden Points Chart.Hidden 사용 기존값의변경 COD.Unchange 와 Value 속성

36 Data Analysis Highlight 기능 선택된부분은돋보이게하여가독성향상 사용자정의 Highlight Enabled, Dimmed, PointAttributes, Speed chart1.highlight.enabled = true; chart1.highlight.dimmed = false; chart1.highlight.pointattributes.color = System.Drawing.Color.Red; chart1.highlight.pointattributes.pointlabels = true;

37 Data Analysis Conditional Attribute 조건에따라포인트를다르게보임 포인트의크기색상변경 UserLegend 지원

38 Data Analysis Conditional Attribute ConditionalAttributes condition1 = chart1.conditionalattributes[0]; condition1.color = Color.Gray; condition1.markersize = 5; condition1.markershape = SoftwareFX.ChartFX.MarkerShape.Circle; condition1.condition.to = 20; condition1.condition.toopen = true; condition1.legend = "Underqualified";

39 Data Analysis Axis Section AxisSection as1 = chart1.axisy.sections[0]; AxisSection as2 = chart1.axisx.sections[0]; From, To, BackColor 등의속성지원

40 Data Analysis Constant Lines & Stripes SoftwareFX.ChartFX.Internet.Server.ConstantLine constantline = chart1.constantlines[0]; constantline.value = 30; constantline.color = System.Drawing.Color.Red; constantline.axis = SoftwareFX.ChartFX.AxisItem.Y; constantline.text = "Alarm Limit 1";

41 Data Analysis Stripe SoftwareFX.ChartFX.Internet.Server.Stripe stripe = chart1.stripes[0]; stripe.from = 20; stripe.to = 30; stripe.color = System.Drawing.Color.FromArgb(192, 192, 255); stripe.axis = SoftwareFX.ChartFX.AxisItem.Y;

42 Axis Handling AxisX, AxisY 를주로사용 기본적으로자동 Scaling, 설정시는 Min, Max, STEP 속성이용 사용자정의라벨지원 Format 속성 DateTime, Custom, Scientific 값이많을경우 Scrolling 기능지원 주눈금, 보조눈금, 그리드및 TickMark 제한없는다중축설정, 다중 Pane 설정 Axis Sections 사용가독성향상

43 Axis Handling Scaling 기본적으로자동 Scaling Max, Min, STEP 등의속성을이용하여설정가능 재계산이필요한경우 RecalScale() 메서드호출 chart1.axisy.min = -20; SoftwareFX.ChartFX.Internet.Server.Axis ax1 = chart1.axisy; ax1.max = 110; ax1.step = 20; ax1.minorstep = 15; ax1.gridlines = true; ax1.title.text = " 세로로보여지는축 ";

44 Axis Handling Formatting 축에표현되는형식지정 Currency, Date, Scientific, Percentage Chart1.AxisY.LabelsFormat = AxisFormat.Scientific 사용자정의형태도가능 Chart1.AxisY.LabelFormat.CustomFormat = Log 스케일 Chart1.AxisY.LogBase = 10;

45 Axis Handling 라벨설정 Axis 클래스의 Label 멤버를이용 KeyLeg 를이용한 X 축라벨 Series 범례 Series 객체의 Legend 사용 Chart 의 SerLeg 이용 3 차원차트의경우 SerKey 로 Z 축라벨 Smart Labeling XY Plot 혹은 Scatter 차트형태에서 X 축에표현되는라벨을자동으로최적의형태로보입니다. 차트의크기에따라서 Year -> Semi-Year -> Quarter -> Month

46 Axis Handling 라벨설정 X 축라벨링의일반적인형태 Dim axis As Axis = Chart1.AxisX axis.label(0) = "January" axis.label(1) = "February" axis.label(2) = "March"... Y 축라벨링 Dim axis As Axis = Chart1.AxisY axis.label(0) = "Very Poor" axis.label(1) = "Poor" axis.label(2) = "Average" axis.label(3) = "Good" axis.label(4) = "Very Good" axis.label(5) = "Excellent" Chart1.AxisY.LabelValue = 20

47 Axis Handling 라벨설정 SerLeg 와 SerKey chart1.serleg[i] = "S" + (i+1).tostring(); chart1.serkey[i] = "S" + (i+1).tostring(); SerLeg

48 Axis Handling 제 2 Y 축 Chart1.Series(1).YAxis = YAxis.Secondary Dim axis As Axis = Chart1.Axis(1) axis.min = axis.max = axis.step = axis.labelsformat.decimals = 0

49 Axis Handling 다중 Pane series0.yaxis = SoftwareFX.ChartFX.YAxis.Main; chart1.axisy.pane = 0; chart1.axisy2.pane = 1;

50 Axis Handling Title 설정 Chart Title TitleDockable 클래스를이용하여여러개의타이틀생성가능 각각의타이틀은고유의색과폰트를사용 Axes Title 각각의축은 Title 을가질수있습니다. 각각의축은정렬이가능합니다. 기본값중앙정렬

51 Axis Handling 3 개의 Title

52 Visual Attributes Marker 별색상지정 Series 별색상지정 폰트설정 Marker 를그림으로지정하기 Color Palettes Borders Gradients Transparency

53 Visual Attributes Marker 색상지정 chart1.point[0, 0].Color = Color.AliceBlue; chart1.point[0, 3].Color = Color.Blue;

54 Visual Attributes Series 색상지정 chart1.series[0].color = Color.Orange; chart1.series[1].color = Color.MediumSlateBlue;

55 Visual Attributes 폰트설정 chart1.axisy.font = new System.Drawing.Font("Courier New",12, System.Drawing.FontStyle.Bold);

56 Visual Attributes Marker 를이미지로 chart1.gallery = Gallery.Lines; chart1.markershape = MarkerShape.Picture; chart1.series[0].picture = Image.FromFile(Application.StartupPath + " Data computer.gif") ; chart1.markersize = 5;

57 Visual Attributes Color Palette Chart1.Palette = "Natural.Adventure"

58 Visual Attributes ImageBorder Borders.ImageBorder myborder; myborder = new Borders.ImageBorder(Borders.ImageBorderType.Emboss); chart1.borderobject = myborder;

59 Visual Attributes Gradients Y축 Max Min Series Gradients Color Alternate Color ' Scheme 지정 Chart1.Scheme = Scheme.Gradient; ' Series Color and Alternate Color 설정 series.color = Color.Yellow; series.alternatecolor = Color.Green;

60 Visual Attributes Gradients Chart Gradients GradientBackground g1 = new GradientBackground(GradientType.ForwardDiagonal); g1.color[0] = Color.Red; g1.position[2] = 1; chart1.insidecolor = Color.Transparent; chart1.backobject = g1;

61 Visual Attributes 투명효과 //Chart 내부투명 Chart1.InsideColor = Color.Transparent // 시리즈반투명설정 Chart1.Series(2).Color = Color.FromArgb(120,0,255,0)

62 Chart FX Tools 1. MenuBar 2. ToolBar 3. Series Legend 4. DataEditor 5. Context Menus 6. User Legend 7. Chart Legend

63 Chart FX Tools Series Legend Chart1.SerLegBox = True Chart1.SerLegBoxObj.Alignment = ToolAlignment.Near Chart1.SerLegBoxObj.Docked = Docked.Bottom Chart1.Series(0).Legend = "Product 1" Chart1.Series(1).Legend = "Product 2" Chart1.Series(2).Legend = "Product 3"

64 Chart FX Tools Values Legend Chart1.LegendBox = True Chart1.LegendBoxObj.Docked = Docked.Left Chart1.LegendBoxObj.Alignment = ToolAlignment.Far Chart1.Legend(0) = "January" Chart1.Legend(1) = "February" Chart1.Legend(2) = "March" Chart1.Legend(3) = "April" Chart1.Legend(4) = "May"

65 Chart FX Tools UserLegend Box 사용자정의레전드를추가할수있다.

66 Chart FX Tools UserLegend Box chart1.userlegendbox = true; SoftwareFX.ChartFX.UserLegendBoxItem userlegendboxitem = chart1.userlege ndboxobj.item[0]; userlegendboxitem.label = "Warning"; userlegendboxitem.color = System.Drawing.Color.Red; userlegendboxitem.markershape = SoftwareFX.ChartFX.MarkerShape.Rect; userlegendboxitem.bordereffect = SoftwareFX.ChartFX.BorderEffect.None; userlegendboxitem.bordercolor = System.Drawing.Color.Black;

67 확장팩 (Extension ) Annotation Extension 기본적으로제공됨 풍선도움말, 도형, 텍스트등의주석제공 ChartFX.Annotation.dll 어셈블리참조 // Create the annotation objects and add the annotation extension to Cha rtfx AnnotationX annot = new AnnotationX(); AnnotationArrow arrow = new AnnotationArrow(); annot.list.add(arrow); chart1.extensions.add(annot); // Configure the arrow object arrow.color = System.Drawing.Color.Salmon; arrow.height = 30; arrow.width = -30; arrow.top = 130; arrow.left = 95; arrow.border.color = System.Drawing.Color.Red;

68 확장팩 (Extension ) Annotation Extension

69 확장팩 (Extension ) Map Extension SVG 파일을이용하여영역정보표시 응용가능한부분 극장, 비행기등의좌석예매상황 지역별온도, 인구분포등표현

70 확장팩 (Extension ) Statistical Extension 히스토그램등의다양한통계차트지원

71 확장팩 (Extension ) OLAP 다양한 OLAP 기능제공 MS OLAP 서비스와연동됨

72 한글화 -> FAQ -> Localization

73 Contact Us 기술지원 의기술지원혹은 Club 영업 전화 영업 02) 홈페이지 국내총판 제작사 제작사기술정보

Microsoft PowerPoint - CfxInt62Sem_ ppt

Microsoft PowerPoint - CfxInt62Sem_ ppt Chart FX Internet 6.2 Chart FX Internet 6.2 세미나 2005.08 김영호 ( 주 ) 예쓰월드 www.yessdata.com Agenda 회사소개 Internet Designer Chart 생성 Gallery Types ( 차트종류 ) 값전달 축설정 라벨설정 타이틀설정 시각적효과 범례 (Legend) 데이터분석 인터넷관련사항