[C# 윈폼] 윈폼 차트 컨트롤 용어 및 사용 방법

안녕하세요.

 

오늘부터는 윈폼 차트 컨트롤에 대해서 알아보려고 합니다.

저는 현재 실무에서 데이터들을 활용하여 사용자들에게 해당 데이터를 사용자의 요구에 맞도록 차트와 시트로 시각화 해주는 작업을 종종 해주고 있는데요.

 

회사에서 사용하고 있는 라이브러리는 ChartFX라는 좀 오래된 유료 상용 차트 라이브러리를 사용하고 있습니다.

 

하지만, 종종 프로젝트를 진행하다 보면..ChartFX 라이브러리에는 없는 차트들이 있어서 저는 MS에서 기본으로 제공해주는 컨트롤인 Chart도 사용하곤 하는데요.

 

그래서 오늘부터 며칠동안은 MS에서 기본으로 제공해주는 Chart 컨트롤에 대해서 알아보려고 합니다.

 

먼저, 차트 컨트롤 사용을 하기 전에 차트와 관련된 몇 가지 용어를 익히시고 들어가면 상당히 좋으실 것 같아서 몇가지 개념들을 정리해 보도록 할게요.

 

차트 컨트롤 용어 정리

• Series : 차트에서 데이타에 해당하는 X,Y 값들을 갖는 것이 Series 이다.
• ChartArea : 하나의 차트는 하나 이상의 ChartArea(차트영역)을 가질 수 있다. 일반적으로 한 Chart는 하나의 차트영역을 갖지만, 하나의 차트 컨트롤이 복수의 차트들 (ChartArea들)을 가질 수 있다.
• Legends : 범례에 해당하는 것으로 0개 이상의 범례를 가질 수 있고, 0개이면 범례가 표시되지 않는다.
• Titles : 차트 컨트롤 상단에 표시되는 제목으로 복수일 경우 위에서부터 한 라인씩 제목을 표시한다.

위의 4가지 용어는 차트 컨트롤 사용함에 있어서 매우 기본적인 용어로써 꼭, 머리속에 익히시고 차트 컨트롤을 사용하시면 더 쉽게 이해하시면서 사용하실 수 있을거에요!

 

그럼 이제 실제로 윈폼 프로젝트를 하나 만들어 보고, 차트 컨트롤을 어떻게 배치하고 사용하는지 간단한 예제 코드를 작성해 보도록 하겠습니다.

 

윈폼 Chart 컨트롤 배치하기

윔폼에서 차트 컨트롤은 도구상자에서 기본적으로 제공을 해주고 있습니다.

도구상자에서 Chart 라고 입력하시면 위와 같이 Chart 컨트롤이 나오게 되는데 이 컨트롤을 오른쪽에 빈 윈폼 프로젝트에 드래그 앤 드랍 하셔서 배치해 주시면 되겠습니다.

여기까지 하셨다면,

이제 간단히 차트에 데이터를 넣어서 차트를 그려 보도록 하겠습니다.

 

그러기 전에, 저는 위의 윈폼에 2개의 버튼을 아래와 같이 추가하였습니다.

 

버튼 2개 추가하기

간단히 위의 버튼 역할을 설명 드리자면, 

Y 버튼을 클릭 시, Y축 기준에만 데이터 넣어서 차트가 그려 지게끔 , 

XY 버튼을 클릭 시, X축, Y축 모두 데이터를 넣어서 차트가 그려 지게끔 소스코드를 작성해 보도록 하겠습니다.

예제 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;   namespace test123 {     public partial class Form1 : Form     {         public Form1()         {             InitializeComponent();               uiBtn_Y.Click += uiBtn_Y_Click;             uiBtn_XY.Click += uiBtn_XY_Click;         }           /// <summary>         /// Y만 추가         /// </summary>         /// <param name="sender"></param>         /// <param name="e"></param>         private void uiBtn_Y_Click(object sender, EventArgs e)         {             chart1.Series["Series1"].Points.Clear();             chart1.Series["Series1"].Points.Add(100);  // X=1             chart1.Series["Series1"].Points.Add(200);  // X=2             chart1.Series["Series1"].Points.Add(300);             chart1.Series["Series1"].Points.Add(400);         }           /// <summary>         /// XY 모두 추가         /// </summary>         /// <param name="sender"></param>         /// <param name="e"></param>         private void uiBtn_XY_Click(object sender, EventArgs e)         {             chart1.Series["Series1"].Points.Clear();             chart1.Series["Series1"].Points.AddXY(10, 100);             chart1.Series["Series1"].Points.AddXY(20, 200);             chart1.Series["Series1"].Points.AddXY(30, 300);             chart1.Series["Series1"].Points.AddXY(40, 400);         }     } }   Colored by Color Scripter

cs

 

실행 결과

이처럼, 각 버튼을 클릭 시, 그에 맞게 X축, Y축 데이터가 알맞게 들어간 것을 확인하실 수 있습니다.

다음 포스팅에서는 하나하나 여기서 살을 덧 붙여서 더 자세이 차트에 데이터를 어떻게 바인딩 하고, 또 다른 기능들에 대해서 여러가지 기능들을 알려주도록 하겠습니다.

 

감사합니다.^^