디자이너로 실습하기

비주얼 스튜디오를 실행해 놓고 순서대로 따라하며 Chart 컨트롤을 사용해 보자. 따라하다 보면 전체적인 구조와 기능을 대부분 파악할 수 있다. 비주얼 스튜디오 2019를 실행한다. 파일/새로 만들기/프로젝트 항목을 선택하고 Windows Forms앱(.Net Framework) 템플릿을 선택한다.

프로젝트 이름은 chartTest로 지정한다. 이 프로젝트 하나로 모든 실습을 다 진행할 것이다. 여러분도 강좌만 보지 말고 반드시 코드를 같이 작성해 보자. 프로젝트가 생성되고 빈폼이 열린다. 도구 상자의 데이터 카테고리에서 Chart를 선택하여 폼에 배치하고 폼에 차도록 적당히 크기를 늘린다.

차트임을 표시하기 위해 폼에 샘플 차트가 표시되지만 아직 데이터가 없어 이대로 실행하면 아무 것도 나타나지 않는다. 속성창을 통해 데이터를 제공하고 여러 속성을 지정해야 한다. 속성을 찾기 쉽도록 알파벳순으로 정렬해 놓자.

차트 표면인 ChartArea1이 생성되어 있고 데이터의 집합인 Series1도 생성되어 있다. 그러나 아직 데이터는 없다. 속성창의 Series 옆의 ... 버튼을 클릭하여 시리즈 컬렉션 편집기를 연다. 시리즈 편집기에는 Series1이 이미 생성되어 있다. Points속성이 데이터 컬렉션이며 속성명 옆의 ... 버튼을 누르면 데이터 편집기가 열린다.

Series 컬렉션 안에 Points 컬렉션이 포함되어 있는 구조여서 속성 편집창이 중첩해서 열린다. 최초 DataPoint 컬렉션은 비어 있다. 추가 버튼을 누르면 DataPoint 객체 하나가 생성된다. 이 객체의 YValues에 55를 입력한다.

하나의 값이 생성되었다. 계속 추가 버튼을 누르고 66, 77, 70, 88을 입력한다. 총 다섯 개의 데이터가 시리즈에 추가되었다. 확인 버튼을 눌러 컬렉션 편집기를 닫는다. 이 상태에서 폼 디자인창을 보면 이미 다섯 개의 데이터가 막대 그래프로 표시된다. 실행하면 이 그래프가 그대로 나타난다.

Points 배열에 값을 더 많이 넣으면 더 많은 막대가 나타난다. 차트의 모양은 시리즈의 ChartType 속성으로 지정하는데 디폴트 타입은 막대 그래프인 Column이다. 속성 편집기에서 다른 타입으로 바꿔 보자.

다음은 Bar와 Line 차트 타입으로 바꾼 모습이다. Chart 컨트롤은 35가지나 되는 차트 타입을 지원한다. 데이터의 구조에 따라 가능한 차트 타입이 제한된다. 연속적인 데이터는 Bar, Column, Line, StepLine, Spline, Point 정도의 타입을 주로 사용한다.

시리즈를 하나 더 추가해 보자. 동시에 두 개의 차트를 같이 보여줄 수 있다. 시리즈 컬렉션 편집기를 열어 Series2를 추가하고 Points 컬렉션에 33, 44, 22, 40, 50 다섯 개의 값을 입력해 넣는다.

Series1은 Line 차트 타입으로 두고 Series2는 Column 타입으로 두면 두 가지 타입의 차트가 같이 표시된다. 둘 다 Column으로 하면 막대가 나란히 표시된다. 같이 표시할 수 있는 타입이 있고 그렇지 않은 타입이 있다. 예를 들어 Column과 Bar는 방향이 달라 같은 표면에 표시할 수 없다.

다음은 Area를 하나 더 추가해 보자. Area는 시리즈를 그리는 영역이며 기본적으로 하나 주어지지만 필요한만큼 만들 수 있다. ChartAreas 속성의 ... 을 클릭하면 에리어 편집기가 열리며 ChartArea1이 미리 생성되어 있다. 추가 버튼을 눌러 ChartArea2를 하나 더 만든다.

에리어를 추가하면 차트 높이가 절반으로 줄어든다. 아직 보이지는 않지만 아래쪽에 에리어가 하나 더 생긴 것이다.

새로 생긴 에리어에는 시리즈가 배치되어 있지 않아 현재는 비어 있다. 시리즈 편집기를 열고 Series2의 속성창에서 ChartArea를 ChartArea2로 지정하고 ChartType을 Bar로 변경해 보자.

출력 표면을 분리하면 각 에리어에 다른 타입의 차트를 각각 배치할 수 있다. 위쪽 에리어에는 Column 시리즈를 표시하고 아래쪽 에리어에는 Bar 시리즈를 표시했다.

이런 식으로 에리어와 시리즈를 조합하여 다양한 형태의 차트를 그린다. 여러 정보를 한꺼번에 표시할 수도 있고 타입이 다른 정보는 에리어를 분리하여 보여줄 수도 있다.

범례는 도표의 각 시리즈를 설명하는 표식이다. 오른쪽 위에 파란색이 Series1이고 노란색이 Series2라고 되어 있어 전혀 설명적이지 않다. 시리즈를 그냥 추가만 했을 뿐이라 디폴트 이름이 붙어 있다. 시리즈 편집기를 열어 Series1의 LegendText를 "성적표"로, Sereis2의 LegendText를 "매출"로 변경해 보자.

범례도 필요한만큼 생성할 수 있으며 어떤 범례에 어떤 표식으로 시리즈를 설명한 것인지 지정한다. 디폴트로 하나의 범례가 미리 생성되어 있다. 차트를 선택하고 속성창에서 Legends의 ...을 눌러 컬렉션 편집기를 열고 Legend1의 속성을 다음과 같이 편집한다.

Docking : Left 차트의 왼쪽에 배치한다.

BackColor : Yellow

Title : "시리즈 설명"

범례가 왼쪽으로 이동하며 배경색이 바뀌고 위쪽에 제목이 표시된다.

이 외에 Enabled로 범례 표시 여부, LegendStyle로 범례의 나열 방향, 각종 색상과 모양을 조정할 수 있다. 두 개 이상의 범례를 만들어 각 시리즈를 그룹으로 나누어 설명할 수도 있다.

다음은 차트에 타이틀을 붙여 보자. 차트를 선택해 놓고 Titles 속성의 ... 버튼을 눌러 컬렉션 편집기를 연다. 디폴트로 비어 있는데 타이틀도 여러 개 지정할 수 있다. 하나 추가한 후 Text는 "차트 타이틀"로 지정하고 폰트는 궁서 20 pt로 지정한다.

차트 위쪽에 타이틀이 표시된다. 타이틀을 계속 추가하여 여러 줄로 표시할 수도 있고 각 변에 타이틀을 붙일 수도 있다.

애노테이션(Annotation)은 도표의 각 부분에 붙이는 보충적인 설명이다. 여러 개를 붙일 수 있어 이 역시 컬렉션이다. 차트의 Annotations 속성에서 ... 버튼을 눌러 컬렉션 편집기를 연다. 최초 비어 있는데 아래쪽의 추가 버튼 콤보 박스를 열면 애노테이션 목록이 나타난다.

EllipseAnnotation을 선택하면 왼쪽 위에 타원형이 하나 나타난다. Text 속성은 "여기 주목"으로 변경하고 BackColor를 눈에 띄는 Lime색으로 지정한다. 이 애노테이션을 어디다 놓을 것인가는 AnchorDataPoint 속성으로 지정하는데 Series1의 DataPoint1로 지정한다.

이렇게 하면 시리즈1의 1번 막대 위에 애노테이션이 나타난다. 너무 바짝 붙어 있는데 AnchorOffsetY 속성을 2로 지정하여 적당히 띄운다.

여기까지 디자인창에서 차트의 속성을 바꿔 가며 여러 가지 실습을 해 보았다. 이 실습을 통해 차트로 어떤 작업이 가능한지 알 수 있으며 대충의 구조도 눈치챌 수 있다. 한두 번 더 실습을 반복해 보자.