강좌와 팁

C# 기본 챠트 컨트롤 간단한 소개 날짜:2020-3-8 9:24:39 조회수:276
작성자 : 소엔
포인트 : 1403
가입일 : 2020-02-02 00:09:14
방문횟수 : 80
글 188개, 댓글 54개
소개 : SoEn 운영자입니다.
작성글 보기
쪽지 보내기
챠트는 데이터를 시각적으로 보여주는 그래픽 컨트롤이다. 과거에는 TChart나 ChartFX 같은 비싼 유료 컨트롤을 주로 사용했었는데 지금은 닷넷의 기본 컨트롤인 MS Chart도 꽤 쓸만해졌다. 디자인이 좀 사무적이지만 간단한 용도라면 C#의 기본 차트만으로도 충분하다. C#의 버전이 낮을 때는 별도로 다운로드받아 설치해야 했는데 닷넷 4.0부터는 기본 컨트롤로 포함되어 있어 바로 사용할 수 있다.
Chart 컨트롤은 표현하는 데이터가 복잡해 구조도 복잡할 수 밖에 없다. 컨트롤 혼자 모든 것을 다 처리할 수는 없어 부속 객체 여러 개를 거느린다. 그 중 다음 두 개의 요소가 가장 중요하며 둘 다 컬렉션이어서 복수 개 포함할 수 있다. 여러 데이터를 여러 표면에 각각 다른 형태로 그릴 수 있다.

ChartArea : 차트의 그리기 영역이다.
Series : 챠트에 그릴 데이터이다.

아주 간단한 차트 예제를 만들어 보자. ChartTest라는 이름으로 WinForm 프로젝트를 생성하고 빈 폼에 Chart 컨트롤을 배치한다. Chart는 도구모음의 데이터 카테고리에 있다. 그리고 액션을 시작할 버튼도 하나 배치한다. 폼의 모양은 다음과 같다.



버튼의 더블클릭 이벤트 핸들러에 다음 코드를 작성한다.

using System.Windows.Forms.DataVisualization.Charting;
....
private void Button1_Click(object sender, EventArgs e)
{
 chart1.Titles.Add("성적표");
 chart1.Series[0].Points.Add(50);
 chart1.Series[0].Points.Add(80);
 chart1.Series[0].Points.Add(75);
 chart1.Series[0].Points.Add(90);
 chart1.Series[0].Points.Add(85);
}

제목은 있어야 하니 "성적표"라는 타이틀을 출력한다. 차트는 기본적으로 하나의 시리즈를 가지고 있는데 Series 컬렉션의 0번에서 기본 시리즈를 구할 수 있다. 별도의 시리즈를 만들어 더 많은 데이터를 줄 수도 있다. 기본 시리즈에 데이터를 채워 넣는다. Series의 Points는 챠트를 그릴 각 점의 컬렉션이다. Add 메서드는 Y점 하나를 추가하며 X는 순서대로 1씩 증가한다. 위 코드는 1번 학생 50점, 2번 학생 80점 식으로 데이터를 집어 넣는 것이다. 그러면 이 데이터가 차트에 막대 그래프 형태로 나타난다.



최소한의 시리즈 데이터만 주어도 차트가 바로 그려지니 사용하기 무척 쉽다. 데이터가 굉장히 많다면 배열로 정의한 후 이 배열을 DataBindY 메서드로 연결해 주면 된다.

private void Button1_Click(object sender, EventArgs e)
{
 chart1.Titles.Add("성적표");
 int[] arScore = new int[] { 50, 80, 75, 90, 85 };
 chart1.Series[0].Points.DataBindY(arScore);
}

X축을 생략하면 1, 2, 3 식으로 번호가 자동으로 붙는데 임의의 X축을 지정하려면 AddXY 메서드를 대신 사용하며 X축의 이름을 같이 지정한다. 학생 이름을 가로축에 나열해 보자.

private void Button1_Click(object sender, EventArgs e)
{
 chart1.Titles.Add("성적표");
 chart1.Series[0].Points.AddXY("이순신", 50);
 chart1.Series[0].Points.AddXY("김유신", 80);
 chart1.Series[0].Points.AddXY("강감찬", 75);
 chart1.Series[0].Points.AddXY("이성계", 90);
 chart1.Series[0].Points.AddXY("홍길동", 85);
}

이때도 배열을 정의한 후 DataBindXY 메서드로 한꺼번에 데이터를 지정할 수 있다. 차트는 통상 2차원의 데이터를 표현하는 경우가 많아 X, Y축으로 각각의 데이터가 있어야 한다. 가로축에 학생 이름이 나타난다.



동작을 테스트해 보기 위해 직접 시리즈값을 입력했는데 실제 프로젝트에서는 당연히 데이터베이스 테이블로부터 데이터를 받아 출력하는 경우가 압도적으로 많다. DB 서버 세팅하고 SQL 날려서 테이블 만들기는 너무 번거로우니 메모리상에서 DataTable을 만들어 챠트에 출력해 보자.

private DataTable MakePeopleTable()
{
 DataTable tblPeople = new DataTable("tblPeople");

 DataColumn col;
 DataRow row;

 // 열 등록
 col = new DataColumn("Name", typeof(String));
 col.MaxLength = 10;
 col.AllowDBNull = false;
 col.Unique = true;
 tblPeople.Columns.Add(col);

 tblPeople.PrimaryKey = new DataColumn[] { col };

 col = new DataColumn("Age", typeof(Int32));
 col.AllowDBNull = false;
 tblPeople.Columns.Add(col);

 col = new DataColumn("Male", typeof(bool));
 col.AllowDBNull = false;
 tblPeople.Columns.Add(col);

 // 행 삽입
 row = tblPeople.NewRow();
 row["Name"] = "정우성";
 row["Age"] = 36;
 row["Male"] = true;
 tblPeople.Rows.Add(row);

 row = tblPeople.NewRow();
 row["Name"] = "고소영";
 row["Age"] = 32;
 row["Male"] = false;
 tblPeople.Rows.Add(row);

 row = tblPeople.NewRow();
 row["Name"] = "배용준";
 row["Age"] = 37;
 row["Male"] = true;
 tblPeople.Rows.Add(row);

 row = tblPeople.NewRow();
 row["Name"] = "김태희";
 row["Age"] = 29;
 row["Male"] = false;
 tblPeople.Rows.Add(row);

 tblPeople.AcceptChanges();

 return tblPeople;
}

private void Button1_Click(object sender, EventArgs e)
{
 chart1.Titles.Add("연예인의 나이");

 DataTable tAge = MakePeopleTable();
 chart1.DataSource = tAge;
 chart1.Series[0].XValueMember = "Name";
 chart1.Series[0].YValueMembers = "Age";
}

MakePeopleTable은 닷넷 정복에서 이미 만들어둔 메서드이며 연예인 4명의 이름과 나이, 성별로 구성된 간단한 테이블을 메모리상에서 생성한다. SQL 구문으로 구하건 다른 DataSet에 있건 어쨌거나 DataTable만 있으면 챠트에 출력할 수 있다.
버튼 클릭 이벤트에서 테이블을 생성하고 이 테이블을 차트의 DataSource 속성에 대입한다. 테이블의 여러 필드중에 어떤 값을 가로축에 놓고 어떤 값을 세로축에 놓을지만 알려주면 각 레코드를 읽어 챠트로 출력한다. 위 예에서는 이름을 가로축에 놓고 나이를 세로축에 놓았다. 당연한 얘기지만 세로축은 수치값이어야 의미가 있다.



챠트의 디폴트 모양은 막대 그래프에 모눈종이 배경의 간단한 형태인데 속성을 변경하면 얼마든지 다양하게 바꿀 수 있다. 먼저 챠트의 모양을 바꿔 보자. 폼에서 차트를 선택해 놓고 속성창을 보면 여러 가지 컬렉션 객체가 있다.



이 컬렉션 각각이 표면의 모양, 시리즈의 모양, 범례, 제목, 설명 등을 지정한다. Series 컬렉션을 열면 Series1이 기본적으로 생성되어 있고 또 선택되어 있다. 이 시리즈의 속성을 변경하면 모양이나 표시 형식을 마음대로 바꿀 수 있다. ChartType 속성이 Column으로 되어 있는데 이 값을 변경하면 차트의 모양이 완전히 바뀐다. chart1 자체는 물론이고 내부 컬렉션의 여러 값을 변경해 보자.

chart1.BackColor = Silver
chart1.BackGradientStyle = TopBottom
chart1.Series[0].ChartType = Area;
chart1.ChartArea[0].BackColor = Yellow;

거의 모든 선, 면의 모양이나 색상을 자유자재로 다 바꿀 수 있다고 보면 된다. 다만 어떤 속성이 어떤 컬렉션 소속인지 정확히 찾아내는게 좀 어려운데 요모 조모 바꿔 보면 금방 알 수 있다. 여기까지 변경한 챠트의 모습은 다음과 같다.



데이터가 많지 않다 보니 좀 썰렁해 보이는데 복잡한 테이블을 여러 개 바인딩해 놓고 적당한 ChartType만 선택해 줘도 꽤 그럴싸하다. 이상으로 시간 관계상 아주 간단하게 MS Chart 사용법을 소개했다.


 



개발자의 천국 SoEn

목록보기 삭제 수정 신고 스크랩


로그인하셔야 댓글을 달 수 있습니다.