코드로 만들기

디자인 타임에 속성만 조정해도 차트를 원하는 형식으로 만들 수 있다. 비주얼 스튜디오의 지원이 훌륭해 속성을 이것 저것 바꿔 보며 재미있게 공부할 수 있다. 그러나 마우스를 통한 편집은 재현이 어렵고 단계가 복잡해 한계가 있다.

차트에 출력할 데이터를 런타임에 제대로 구할 수 있기 때문에 결국은 코드로 프로그래밍해야 한다. 앞에서 디자인 타임에 만든 차트 컨트롤을 삭제하여 원래대로 리셋한다.

빈 폼에 차트 컨트롤을 새로 하나 배치한다. 폼 크기는 500 * 350으로 작게 설정하고 차트의 Dock 속성을 Fill로 지정하여 폼을 가득 채운다. 캡처를 작게 잡아도 차트를 크게 보이도록 하기 위해서인데 실습할 때는 아무렇게나 해도 상관 없다.

이 상태로 실행하면 차트는 그냥 하얀 영역으로 표시될 뿐이다. 차트에 데이터를 제공하고 속성을 편집하는 코드가 필요하다. 폼의 빈 영역을 더블클릭하여 Form1_Load 이벤트 핸들러를 작성하고 여기에 다음 코드를 작성한다.

private void Form1_Load(object sender, EventArgs e)

{

chart1.Series[0].Points.Add(55);

chart1.Series[0].Points.Add(66);

chart1.Series[0].Points.Add(77);

chart1.Series[0].Points.Add(70);

chart1.Series[0].Points.Add(80);

}

시리즈 하나는 기본적으로 생성되어 있으므로 0번 시리즈에 데이터만 제공하면 된다. Points 컬렉션의 Add 메서드로 값을 넣어 주면 이 값이 차트에 나타난다. 실행해 보자.

두번째 이후의 시리즈는 직접 생성해야 한다. Series 컬렉션의 Add 메서드로 추가하되 이후의 참조를 위해 이름을 주는 것이 좋다. 데이터는 Points.Add로 계속 추가할 수 있지만 DataBind 메서드를 사용하면 배열을 한꺼번에 등록할 수 있다. 다음 코드를 더 작성해 보자.

chart1.Series.Add("Series2");

chart1.Series[1].Points.DataBindY(new int[] { 33, 44, 22, 40, 50 });

속성창에서는 일일이 값을 입력해야 하지만 코드를 사용하면 배열이나 컬렉션을 통째로 등록할 수 있어 편리하다. 두 개의 차트가 나란히 나타난다.

다음은 에리어를 하나 더 추가하고 Sereis2를 아래쪽으로 옮긴 후 Bar 타입으로 바꾸어 보자. 다음 코드 세 줄이면 된다.

chart1.ChartAreas.Add("ChartArea2");

chart1.Series["Series2"].ChartArea = "ChartArea2";

chart1.Series["Series2"].ChartType = SeriesChartType.Bar;

ChartAreas 컬렉션의 Add 메서드로 ChartArea2 에리어를 추가했다. 여기까지만 하면 아래쪽에 빈 에리어만 생성된다. Series2를 아래쪽 에리어로 이동시켜 보자. 시리즈의 ChartArea 속성에 원하는 에리어의 이름을 대입한다.

이런 용도로 쓰기 위해 모든 객체에 이름을 붙여 두는 것이 좋다. 시리즈도 Series 컬렉션에서 0번, 1번 순서값으로 참조할 수 있지만 이름을 붙여 두면 이름으로 검색할 수 있다. 위 두 번째 줄은 다음 코드와 같다.

chart1.Series[1].ChartArea = "ChartArea2";

Sereis[1]이 두 번째 컬렉션을 의미한다. 그러나 시리즈가 많아지면 순서값은 헷갈리고 중간에 첨삭되면 바뀔 수도 있어 일관성이 떨어진다. 그래서 이름을 붙여 두고 Series["Series2"] 형식으로 이름을 통해 찾는 것이 더 좋다.

세번째 줄은 시리즈의 차트 타입을 Bar로 변경한다. SeriesChartType을 찾을 수 없다는 에러가 발생하면 다음 using문을 소스 선두에 작성한다.

using System.Windows.Forms.DataVisualization.Charting;

차트와 관련된 웬만한 타입이 다 Charting 네임스페이스에 선언되어 있어 이 using문만 추가하면 차트 관련 타입을 자유롭게 쓸 수 있다. 여기까지의 실행 결과는 다음과 같다.

다음은 범례를 조정해 보자. 시리즈에 범례 텍스트를 지정하고 Legends 컬렉션의 0번 범례의 속성을 조정하면 된다.

chart1.Series["Series1"].LegendText = "성적표";

chart1.Series["Series2"].LegendText = "매출";

chart1.Legends[0].Docking = Docking.Left;

chart1.Legends[0].BackColor = Color.Yellow;

chart1.Legends[0].Title = "시리즈 설명";

디자인창에서 속성을 찾아 변경하는 동작을 코드로 그대로 옮긴 것 뿐이다. 왼쪽에 노란색 범례가 나타난다.

다음은 타이틀을 붙여 보자. 타이틀은 Titles 컬렉션에 생성한다. 새 타이틀 객체 추가하고 텍스트와 폰트만 지정하면 된다.

chart1.Titles.Add("Title1");

chart1.Titles["Title1"].Text = "차트 타이틀";

chart1.Titles["Title1"].Font = new Font("궁서", 20);

위쪽에 차트 제목이 출력된다.

보다시피 차트의 모든 세부 요소는 컬렉션으로 되어 있고 원하는 것을 추가한 후 속성만 편집하면 된다. C#의 기본 문법만 안다면 아주 쉬운 코드이다. 그러나 구조가 복잡해지고 중첩이 심해지면 약간씩 헷갈리는 면도 있다.

마지막으로 애노테이션을 추가해 보자. 애노테이션은 Annotations 컬렉션에 저장하되 파생 타입이 있다는 면에서 조금 복잡하다. 원하는 타입의 애노테이션 객체를 생성하여 속성을 편집한 후 컬렉션에 추가한다.

EllipseAnnotation ell = new EllipseAnnotation();

ell.Text = "여기주목";

ell.BackColor = Color.Lime;

ell.AnchorOffsetY = 2;

ell.AnchorDataPoint = chart1.Series["Series1"].Points[0];

chart1.Annotations.Add(ell);

타원 애노테이션인 EllipseAnnotation 객체를 생성하고 이 객체의 Text, BackColor. AnchorOffsetY 속성을 지정한다. 애노테이션을 붙일 위치인 AnchorDataPoint 속성은 시리즈내의 포인트값을 지정한다는 면에서 조금 까다롭다. Series1의 Points 컬렉션에서 0번 포인터를 찾아 대입하면 된다. 이렇게 만든 타원 애노테이션 객체를 Annotations 컬렉션에 추가한다.

이상으로 디자인 타임에 만들었던 예제와 똑같은 예제를 코드로 만들어 보았다. 과정이 긴 거 같지만 코드줄 수는 얼마 되지 않는다.