출처 : https://blog.naver.com/PostView.naver?blogId=kimmingul&logNo=221877447894&parentCategoryNo=&categoryNo=56&viewDate=&isShowPopularPosts=false&from=postView
C#에서 막대그래프, 선그래프 등을 그리기 위해서 차트 기능을 사용하는 방법에 대해 알아보고자 합니다.
1. 차트 컨트롤 배치
도구상자(Toolbox)에서 차트 Chart 컨트롤을 사용하여 Form1.cs[디자인]에 배치합니다.
그리고 Chart1의 속성 중, Dock 값을 Fill로 바꿔주면 전체화면으로 나타납니다.
차트 항목의 주요 속성으로 Annotations, ChartsAreas, Legends, Series, Titles 속성이 있습니다. 하나하나 살펴보겠습니다.
2. 차트 항목 속성 (1) Series
Series 속성은 데이터, 차트유형, 레이블, 범례 등에 대해서 다룹니다.
* 멤버(Member)
1개의 차트는 여러 개의 Series 멤버들을 갖을 수 있습니다. 예를 들어 아래의 막대그래프처럼 하나의 차트에 남/여 데이터를 구분해서 그리고자 할 때 멤버를 추가해주면 됩니다. 각 멤버에 접근하기 위해서는 인덱스(0,1,2,...)와 이름(Series1, Series2, Series3,...) 등으로 접근할 수 있습니다. 이름으로 접근하고자 할 때에는 " " (double quotation mark) 내에 기재합니다.
예1) chart1.Series[0].Points.Add(100);
예2) chart1.Series["Series"].Points.Add(150);
Series 멤버를 2개로 설정한 차트의 예시
* 데이터 항목
IsXValueIndexed 속성: X값에 데이터 요소 인덱스(1,2,...)가 사용됨을 나타냅니다.
Name 속성: 데이터계열의 이름입니다.
차트에서 Series 에 접근하기 위해서 사용됩니다. 범례를 별도 설정하지 않으면, 범례에 Name 값이 표시됩니다.
Points 속성 : 계열 데이터 요소 컬렉션입니다.
차트에 표시할 값들에 대해 정의할 수 있습니다. Point의 멤버로 Series를 추가하여 값을 직접 입력할 수 있습니다. 그러나 위 예시코드처럼 코드 상에서 값을 입력하게 됩니다. 아래와 같은 메소드들을 사용가능합니다.
ex1) chart1.Series[0].Points.Add(값);
ex2) chart1.Series[0].Points.AddY(Y값);
ex3) chart1.Series[0].Points.AddXY(X값, Y값);
ex4) chart1.Series[0].Points.clear();
XValueType 속성: X축에 저장되는 값의 유형입니다. 기본값은 Auto이며, Double, SIngle, Int32, String 등을 설정 가능합니다.
YValuesPerPoint 속성: 각 데이터 요소에 대해 저장된 Y값 수입니다. 기본값은 1입니다.
YValueType 속성: Y축에 저장되는 값의 유형입니다. 기본값은 Auto이며, Double, SIngle, Int32, String 등을 설정 가능합니다.
* 레이블, 레이블 모양, 맵영역
IsValueShownAsLable 속성: true인 경우 요소의 값을 레이블로 표시합니다. 기본값은 False 입니다.
Label 속성: 데이터 요소 레이블 텍스트입니다.
ex1) chart1.Series[0].Label = "#VALY"; // Label에 Y값 출력하기
LabelFormat 속성: 요소 값을 레이블로 변환하는데 사용되는 형식 문자열입니다.
LabelToolTip 속성: 데이터 요소 레이블의 도구 설명입니다.
Font 속성: 데이터 요소 글꼴입니다. Size, Bold, Italic, Underline 등을 설정할 수 있습니다.
LabelAngle 속성: 레이블 글꼴 각도입니다.
LabelForeColor 속성: 레이블 색을 가져오거나 설정합니다.
LabelBackColor 속성: 레이블 배경색을 가져오거나 설정합니다.
ToolTip 속성: 요소의 도구 설명을 가져오거나 설정합니다.
* 범례
IsVisibleInLegend 속성: 항목이 범례에 표시됨을 나타냅니다. 기본값은 True 입니다.
Legend 속성: 계열에서 사용하는 차트 범례 이름입니다.
LegendText 속성: 범례에 있는 항목의 텍스트입니다.
ex1) chart1.Series[0].LegendText = "Male";
ex2) chart1.Series[0].LegendText = "#VALX(#PERCENT{P1})"; // 범례에 백분율을 표기하고자 할 때
LegendToolTip 속성: 범례에 있는 항목의 도구 설명입니다.
* 모양
(Enabled): 계열 활성화 플래그를 가져오거나 설정합니다. 기본값은 True 입니다.
Color 속성: 데이터 요소 색입니다. (색상은 "Color.색상명" 이렇게 표시해줍니다.)
ex) chart1.Series[0].Color=Color.Red;
Palette 속성: 색 색상표입니다. (팔레트는 "System....ChartColorPalette.팔레트이름" 이렇게 표시해줍니다.)
ex) chart1.Series[0].Palette=System.Windows.Forms.DataVisualization.Charting.ChartColorPalette.Excel;
ShadowColor 속성: 그림자 색을 가져오거나 설정합니다.
BorderColor 속성: 테두리 색을 가져오거나 설정합니다.
BorderWidth 속성: 테두리 두계(픽셀)을 가져오거나 설정합니다.
BoardDashStyle 속성: 테두리 스타일을 가져오거나 설정합니다. Solid, Dot, Dash, DashDot, DashDotDot
BackImageTransparentColor 속성: 이미지를 그릴 때 투명하게 그려지는 색을 가져오거나 설정합니다.
* 차트
ChartArea: 이 계열이 그려지는 차트 영역입니다. 여러 개의 차트 구역으로 나누어져 있을 때 사용되며, 인덱스가 아닌 ChartArea 이름을 text로 적어줘야 합니다.
ex) chart1.Series[0].ChartArea="ChartArea2";
ChartType 속성: 계열을 그리는데 사용되는 차트 종류입니다. (차트종류는 "System....SeriesChartType.차트종류" 이렇게 표시해줍니다.)
ex1) chart1.Series[0].ChartType=System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
ex2) chart1.Series[0].ChartType=(System.Windows.Forms.DataVisualization.Charting.SeriesChartType)3; // 상동
차트 종류는 총 34종류를 지원합니다.
콤보박스에서 chart 종류를 선택하도록 하고자 한다면, 아래 코드를 활용하실 수 있습니다.
string [] charttypes = new string[] { "Point", "FastPoint", "Bubble", "Line", "Spline", "StepLine", "FastLine","Bar","StackedBar","StackedBar100", "Column", "StackedColumn", "StackedColumn100", "Area", "SplineArea", "StackedArea", "StackedArea100", "Pie", "Doughnut", "Stock", "Candlestick", "Range", "SplineRange", "RangeBar", "RangeColumn", "Radar", "Polar", "ErrorBar", "BoxPlot", "Renko", "ThreeLineBreak", "Kagi", "PointAndFigure", "Funnel", "Pyramid" };
comboBoxChartType.Items.AddRange(charttypes);
comboBoxChartType.SelectedIndex = 0;
차트 종류는 아래와 같습니다.
* 축
XAxisType 속성: 이 계열에 사용된 X축의 유형입니다. Primary와 Secondary를 선택할 수 있습니다.
YAxisType 속성: 이 계열에 사용된 Y축의 유형입니다. Primary와 Secondary를 선택할 수 있습니다.
* 기타
막대그래프 같은 경우, 차트값 크기에 따라 정렬(sort) 하고자 할 때, 아래와 같이 할 수 있습니다.
ex) chart1.DataManipulator.Sort(System.Windows.Forms.DataVisualization.Charting.PointSortOrder.Descending, chart1.Series[0]);
3. 차트 항목 속성 (2) ChartArea
ChartArea 속성은 몇 개의 차트영역으로 나눌지 여부, 축 눈금 설정, 모양 등에 대해서 다룹니다.
ChartArea 멤버를 2개로 설정한 모습
* 멤버(Member)
1개의 차트는 여러 개의 ChartArea 멤버들을 갖을 수 있습니다. 예를 들어 아래의 막대그래프처럼 남/여 데이터를 두 개의 차트로 나눠서 그리고자 할 때 ChartArea 멤버를 추가해주면 됩니다.
이때 ChartArea2번에 차트를 연결하기 위해서는 Series 맴버를 추가한 후 Series2의 속성에서 ChartArea 속성에서 ChartArea2를 선택해주면 아래와 같이 나타납니다.
ChartArea 멤버를 2개로 설정한 차트의 예시
* 축
Axes 속성: 차트 영역 축입니다. (컬렉션) 항목에서 아래 그림과 같이 Minimum, Maximum, Interval 등을 설정합니다.
ex1) chart1.ChartAreas[0].AxisX.Minimum (또는 Maximum) = 숫자;
ex2) hart1.ChartAreas[0].AxisY.Minimum (또는 Maximum) = 숫자;
* 맞춤
AlignmentOrientation 속성: 차트 영역 맞춤방향입니다. Vertical, Horizontal, All 을 선택할 수 있습니다.
AlignmentStyle 속성: 차트 영역 맞춤 유형입니다.
AlignWithChartArea 속성: 맞춤에 사용되는 차트 영역의 이름을 설정하거나 가져옵니다.
* 모양
(Visible) 속성: 차트 영역의 표시 여부를 지정하는 플래그를 가져오거나 설정합니다.
BackColor 속성: 배경색을 가져오거나 설정합니다.
BorderColor 속성: 테두리 색을 가져오거나 설정합니다.
BorderDashStyle 속성: 테두리 스타일을 가져오거나 설정합니다.
BorderWidth 속성: 테두리 두께(픽셀)를 가져오거나 설정합니다.
4. 차트 항목 속성 (3) Titles
Titles 속성은 차트의 타이틀을 보여줄지 여부, 타이틀 내용 (Text), Font/Size 설정을 합니다.
5. 차트 항목 속성 (4) Legends
범례(Legends) 속성은 차트의 legend를 보여줄지 여부, Font/Size 설정을 합니다.
* 도킹
Alignment 속성: 범례 맞춤입니다. 이 속성이 작동하려면 범례 Position이 Auto로 설정되어야 합니다. 기본값은 Near 입니다. (Near, Center, Far 에서 선택)
ex1) chart1.Legends[0].Alignment = StringAlignment.Center;
DockingToChartArea 속성: 범례가 도킹할 차트영역(ChartArea)을 선택합니다. 기본값은 NotSet 입니다.
Docking 속성: 범례 도킹입니다. 이 속성이 작동하려면 범례 Position이 Auto로 설정되어야 합니다. 기본값은 Right 입니다. (Top, Right, Left, Bottom 에서 선택)
ex1) chart1.Legends[0].Docking = System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
* 제목
Title 속성: 범례 제목 텍스트입니다.
TitleAlighment 속성: 범례 제목 가로 텍스트 맞춤입니다.
TitleBackColor 속성: 범례 제목 배경색을 가져오거나 설정합니다.
TitleFont 속성: 범례 제목 글꼴을 가져오거나 설정합니다.
TitleForeColor 속성: 범례 제목 텍스트 색입니다.
6. 차트 항목 속성 (5) Annotations
Annotations 속성은 차트의 주석을 어떻게 표시할지, 어느 ChartArea에 귀속시킬 것인지, 화살표 모양/색상은 어떻께 할지, 선의 형태는 어떻게 할지 등을 합니다.
7. 차트 항목 속성 (6) 기타
* 데이터
DataSource 속성: 계열 데이터를 채우는 데 사용되는 데이터 원본입니다. Series ValueMember 속성도 설정해야 합니다.
* 동작
AllowDrop 속성: 컨트롤에 데이터를 끌어서 놓을 수 있는지 여부를 나타냅니다.
ContextMenuStrop 속성: 컨트롤을 마우스 오른쪽 단추로 클릭하면 표시되는 바로가기 메뉴입니다.
Enabled 속성: 컨트롤 사용 여부를 나타냅니다. 기본값 true
ImeMode 속성: 선택한 개체의 IME 입력기 상태를 확인합니다.
TabIndex 속성: 탭 순서에서 이 컨트롤이 사용할 인덱스를 결정합니다.
TabStop 속성: 탭 키를 사용하여 컨트롤의 포커스를 이동할 수 있는지 여부를 나타냅니다.
Visible 속성: 컨트롤을 표시할지 여부를 결정합니다.
* 레이아웃
Anchor 속성: 특정 컨트롤이 바인딩되는 컨테이너의 가장자리를 정의합니다. 기본값 Top,Left
Dock 속성: 컨테이너에 바인딩된 컨트롤의 테두리를 정의합니다. 기본값 None
Location 속성: 컨트롤 컨테이너의 왼쪽 맨 위를 기준으로 하는 컨트롤 왼쪽 맨 위의 좌표입니다. X, Y값
Margin 속성: 이 컨트롤과 다른 컨트롤 여백 사이의 공간을 지정합니다.
MaximumSize 속성: 컨트롤의 최대 크기를 지정합니다.
MinimumSize 속성: 컨트롤의 최소 크기를 지정합니다.
Padding 속성: 컨트롤의 내부 간격을 지정합니다.
Size 속성: 컨트롤의 크기(픽셀)입니다.
* 모양
BackColor 속성: 배경색을 가져오거나 설정합니다.
BorderlineWidth 속성: 차트 테두리 두께입니다.
Cursor 속성: 포인터가 컨트롤 위로 이동할 때 나타나는 커서입니다.
Text 속성: 컨트롤에 연결된 텍스트입니다.
* 이미지
AntiAliasing 속성: 차트를 그릴 때 다듬기(앤티앨리어싱)를 적용할지를 지정합니다. 기본값 All
IsSoftShadows 속성: 그림자를 그리는 동안 다듬기가 적용되는지를 지정합니다. 기본값 True
TextAntiAliasingQuality 속성: 텍스트 앤티앨리어싱의 품질을 설정하기나 가져옵니다. 기본값 High
* 그 외 사용자 지정 속성이미지
MSDN: https://docs.microsoft.com/ko-kr/previous-versions/dd456764(v=vs.140)?redirectedfrom=MSDN
8. 막대그래프 그리기 (1) 기초
먼저 Form1의 이벤트 속성(Properties) 중, 동작항목의 Load 를 더블 클릭해주면 Form1.cs 소스에 아래 항목이 추가됩니다. 이제 Form1_Load 메소드에 코드를 입력하여 차트를 그려보겠습니다.
홍길동, 변강쇠, 김철수, 박개똥, 이칠푼이라는 남자 5명의 키가 [180, 170, 175, 190, 168] 이라고 할 때, 이를 막대그래프로 그려보겠습니다.
먼저 다음과 같이 코드를 입력하면 아래와 같은 차트를 볼 수 있습니다.
x축에 각자의 이름을 표시하고, 막대의 색깔을 빨간색으로 바꾸려면 아래와 같이 Points.AddXY 와 Color 메소드를 사용하면 됩니다.
막대의 색상이 한가지라 단조롭죠?
색상을 직접 설정해주고, 타이들도 추가하고, 막대 위쪽으로 수치가 함께 출력되도록 하겠습니다.
각 데이터별로 색상을 설정하는 것은 상당히 불편합니다.
Palette 메소드를 이용해서 다양한 색상을 적용해 보도록 하겠습니다.
Palette에는 미리 설정된 색상표가 내장되어 막대마다 다양한 색깔을 그려줍니다.
팔레트는 System.Windows.Forms.DataVisualization.Charting.ChartColorPalette.팔레트종류 이런 식으로 표현합니다.
차트종류도 함께 설정해보겠습니다.
차트종류는 System.Windows.Forms.DataVisualization.Charting.SeriesChartType.차트종류 이런 식으로 표현합니다. 막대그래프의 차트이름은 Column입니다.
9. 막대그래프 그리기 (2) 데이터 바인딩 활용하기
각 개별 데이터값을 입력하면서 코드를 작성하니까 좀 코드가 길고 구질구질하죠?
데이터바인딩을 이용하면 다수의 데이터를 한번에 설정하여 활용하는 것을 말합니다.
* Chart 컨트롤과 바인딩되는 데이터 유형
배열(Array), List, DataSet, DataView, SqlDataAdapter, DataReader, SqlCommand, OleDbCommand, OleDbDataAdapter, IList, IListSource, IEnumerable 등이 있습니다.
* 데이터바인딩 메소드
(1) Series.Points.DataBindY() / DataBindXY() : 배열/컬렉션에 대한 바인딩
(2) Series.Points.DataBind() : 배열/컬렉션에 대한 바인딩
(3) Chart.DataBindTable() : 테이블데이터(DataReader, DataTable, DataSet 등)과 바인딩에 유용
(4) Chart.DataSource / Chart.DataBind() : 테이블데이터과 바인딩에 유용
(5) Chart.DataBindCrossTable() : X, Y 축 이외에 그룹으로 묶는 컬럼을 지정함**
ex1) chart1.Series[0].Points.DataBind (데이터컬렉션, "X축속성", "Y축속성", 추가옵션); //추가옵션에 null 로 할 수 있음.
ex2) chart1.DataBindTable(dataReader, "store"); // sqlDataReader 객체와 X축 필드를 지정하는 예시
ex3) chart1.DataSource = ds.Tables[0]; // DataSet 객체의 DataTable를 바인딩하고, 이후 DataBind()를 호출해줌!.
chart1.Series[0].XValueMember = "store";
chart1.Series[0].YValueMembers = "sales";
Chart1.DataBind();
ex4) chart1.DataBindCrossTable(데이터컬렉션, "그룹속성", "X축속성", "Y축속성", 추가옵션); //
데이터컬렉션은 Enumerable 속성 처리가 필요한듯. 예를 들어 dt.AsEnumerable() 이렇게 데이터를 입력해준다.
이때, 추가옵션으로 "Label=그룹속성" 같은 것을 할 수 있음
* DataTable 바인딩
DataTable 항목 생성과 값 대입법
(1) 열 (항목명) : DataTable.Column.Add()
(2) 행 (데이터) : DataTable.Rows.Add()
DataTable을 바인딩하는 방법: chart1.DataSource = DataTable 객체명;
X/Y축 설정법: chart1.Series[0].XValueMember="항목"; / chart1.Series[0].YValueMembers ="항목";
차트그리기: chart1.DataBind();
ex1) tbl = new DataTable();
tbl.Column.Add("year", typeof(string));
tbl.Column.Add("result", typeof(int));
tbl.Rows.Add("2014", 80);
tbl.Rows.Add("2014", 120);
chart1.DataSource = tbl;
chart1.Series[0].XValueMember = "year";
chart1.Series[0].YValueMembers = "result";
chart1.Series[0].IsValueShownAsLabel = true;
chart1.Series[0].LegendText = "Sales";
Chart1.DataBind();
바로 앞에서 그렸던 차트는 아래와 같이 X1, Y1 배열을 통해 좀더 간결하게 표현할 수 있습니다.
10. 막대그래프 그리기 (3) 그룹 표현하기
데이터바인딩은 다수의 데이터를 한번에 설정하여 활용하는 것을 말합니다.
홍길동, 변강쇠, 김철수, 박개똥, 이칠푼 라는 남자 5명의 키가 [180, 170, 175, 190, 168] 이고
김순이, 이미진, 박세리, 최영희, 강은아 라는 여자 5명의 키가 [160, 168, 155, 148, 171] 일때,
이를 막대그래프로 표현하는 방법들에 대해 살펴보겠습니다.
남자와 여자를 하나의 차트에 모두 표현하려면 다음과 같이 코드를 입력하면 됩니다.
위 차트는 ChartArea1 이라는 이름의 ChartAreas 에 Male과 Female이라는 2개의 Series가 동시에 표현된 것입니다. 그래서 동일한 X/Y 축에 함께 표현된것입니다. ChartArea가 축(Axis) 속성을 다루는 이유입니다.
이제 남자와 여자를 2개의 차트로 나누어 표현하려면 어떻게 해야 할까요?
ChartArea를 2개 만들어서 남자는 ChartArea1에, 여자는 ChartArea2에 그려주면 됩니다.
추가적으로 Series 의 IsValueShownAsLabel 속성을 true로 하여 각 막대그래프의 값이 보여지도록 하겠습니다.
'개발언어 > C#' 카테고리의 다른 글
| [C#] DATETIME 사용법/ 날짜함수 (0) | 2021.11.15 |
|---|---|
| [C#] ListView 사용법 (0) | 2021.11.15 |
| [C#] Chart 사용법 요약 (0) | 2021.11.11 |
| [C#]그래프 관련 (0) | 2021.11.11 |
| [C#] Chart Setting (0) | 2021.11.09 |
