자습서: 데이터베이스에 차트 데이터 바인딩(차트 컨트롤)

아티클
03/02/2011

이 자습서에서는 데이터베이스에서 데이터를 바인딩하는 방법 및 차트에서 도구 설명을 사용하고 축 레이블을 조정하는 방법에 대해 설명합니다.

이 자습서를 완료하려면 AdventureWorks2008 샘플 OLTP 데이터베이스가 SQL Server 인스턴스(예: SQL Server 2008 Express)에 설치되어 있어야 합니다. 이 샘플 데이터베이스를 설치하려면 www.codeplex.com을 참조하십시오.

데이터베이스에서 데이터 바인딩

먼저 데이터 소스 컨트롤의 데이터를 차트 컨트롤에 바인딩한 다음, 데이터 소스의 특정 열을 계열의 X 값과 Y 값에 바인딩합니다.

데이터베이스의 데이터를 차트에 바인딩하려면

Windows Forms 또는 웹 응용 프로그램의 디자인 화면에서 도구 상자의 차트 컨트롤을 끌어서 놓습니다.
차트 컨트롤의 속성 창에 있는 데이터 범주에서 DataSourceID(ASP.NET) 또는 DataSource(Windows Forms) 속성을 클릭한 다음, 드롭다운 화살표를 클릭하고 **<새 데이터 소스…>**를 선택합니다.
데이터 소스 형식 선택 페이지에서 데이터베이스를 선택하고 다음을 클릭합니다.
데이터 연결 선택 페이지에서 새 연결을 클릭합니다.
연결 추가 대화 상자에서 데이터 소스 필드가 **Microsoft SQL Server (SqlClient)**로 설정되어 있는지 확인한 다음, 서버 이름 및 AdventureWorks2008 데이터베이스의 데이터베이스 이름을 입력합니다.
연결 테스트를 클릭하고 확인을 클릭합니다.
다음을 두 번 클릭합니다.
Select 문 구성 페이지에서 사용자 지정 SQL 문 지정을 선택하고 다음을 클릭합니다.

다음 쿼리를 복사하여 SQL 문 필드에 붙여넣고 다음을 클릭합니다.

select LastName, SalesYTD, SalesLastYear 
  from HumanResources.Employee as e
  inner join Person.Person as p on e.BusinessEntityID = p.BusinessEntityID
  inner join Sales.SalesPerson as s on e.BusinessEntityID = s.BusinessEntityID

쿼리 테스트를 클릭한 다음 마침을 클릭합니다.

이제 쿼리에 지정된 데이터 열과 함께 SQL 데이터 소스가 차트 컨트롤에 바인딩됩니다.

차트에서 X 및 Y 값에 데이터를 바인딩하려면

차트 컨트롤에 대한 계열 컬렉션 편집기를 엽니다.
기본 계열의 속성 창에 있는 데이터 소스 범주에서 XValueMember 속성을 클릭한 다음, 드롭다운 화살표를 클릭하고 LastName을 선택합니다.

XValueMember 드롭다운 목록에는 차트 컨트롤에 바인딩된 데이터 소스에서 반환되는 모든 열이 표시됩니다.
YValueMembers 속성을 클릭하고 드롭다운 화살표를 클릭한 다음, SalesYTD를 선택합니다.

이제 기본 계열의 X 값은 LastName 열에 바인딩되고 기본 계열의 첫 번째 Y 값은 SalesYTD 열에 바인딩됩니다.
계열 컬렉션 편집기에서 추가를 클릭하고 다음 값을 사용하여 새 계열에도 동일한 작업을 수행합니다.

속성

값

XValueMember

LastName

YValueMembers

SalesLastYear
확인을 클릭합니다.
응용 프로그램을 실행합니다.

이제 두 계열에서 데이터 소스의 데이터 요소가 자동으로 채워지는 것을 볼 수 있습니다. 또한 차트 컨트롤은 읽기 쉽도록 레이블을 자동으로 조정하므로 일부 직원은 차트에 표시되지 않습니다.

속성	값
XValueMember	LastName
YValueMembers	SalesLastYear

축 레이블 및 제목 조정

ChartArea 컬렉션 편집기에서 Axes 컬렉션 속성을 사용하여 차트 영역 축의 레이블과 제목을 사용자 지정합니다.

축 레이블을 조정하고 제목을 추가하려면

차트 컨트롤에 대한 ChartArea 컬렉션 편집기를 엽니다.
기본 차트 영역에 대한 속성 창의 축 범주에서 Axes 컬렉션 속성을 클릭하고 줄임표 단추(…)를 클릭합니다. 이렇게 하면 축 컬렉션 편집기가 열립니다.

Axes 컬렉션(Axis 배열)에는 차트 영역의 축이 포함됩니다.
기본 X축에 대한 속성 창의 레이블 범주에서 LabelStyle 속성을 확장하고 Interval 속성을 1로 설정한 다음, IntervalStyle 속성이 설정되어 있지 않은지 확인합니다.

이렇게 하면 차트 컨트롤에 표시되는 모든 데이터 요소의 레이블이 표시됩니다.
제목 범주에서 Title 속성을 "Employee"로 설정합니다.
기본 Y축에 대한 속성 창의 제목 범주에서 Title 속성을 "Sales"로 설정합니다.
확인을 두 번 클릭합니다.
응용 프로그램을 실행합니다.

이제 차트 컨트롤의 기본 X축에 모든 직원이 90도 각도로 자동 정렬되어 표시됩니다.

계열에 도구 설명 추가

이제 두 계열에 도구 설명을 추가하여 데이터 요소를 구분합니다.

계열에 도구 설명을 추가하려면

차트 컨트롤에 대한 계열 컬렉션 편집기를 다시 엽니다.
첫 번째 계열을 선택합니다.
첫 번째 계열에 대한 속성 창의 맵 영역 범주에서 Tooltip 속성을 "#VALX: #VALsales this year."로 설정합니다.

Tooltip 속성의 값 필드에서 줄임표 단추를 클릭하면 문자열 키워드 편집기가 열립니다. 이 대화 상자에서는 키워드를 사용하여 도구 설명 문자열을 작성할 수 있습니다.
첫 번째 계열에 대한 속성 창의 맵 영역 범주에서 Tooltip 속성을 "#VALX: #VALsales last year."로 설정합니다.
확인을 클릭합니다.
응용 프로그램을 실행한 다음, 각 데이터 요소의 위쪽에서 커서를 누르고 있으면 도구 설명이 표시됩니다.

다음 단계

데이터베이스에서 데이터를 바인딩하는 방법과 차트에서 도구 설명을 사용하고 축 레이블을 조정하는 방법에 대해 배웠습니다. 이벤트를 사용하여 차트를 사용자 지정하는 방법은 자습서: 이벤트를 사용하여 차트 사용자 지정을 참조하십시오.

참고 항목

참조

System.Windows.Forms.DataVisualization.Charting

System.Web.UI.DataVisualization.Charting

다음을 통해 공유