C# Windows Forms 강의 27편: Chart 컨트롤을 사용한 데이터 시각화

1. 강의 개요

이번 강의에서는 Chart 컨트롤을 활용해 데이터를 시각적으로 표현하는 방법을 학습합니다.
Chart 컨트롤은 막대 그래프, 꺾은선 그래프, 원형 그래프 등 다양한 그래프를 지원하며, Windows Forms 애플리케이션에서 데이터 시각화를 구현할 수 있습니다.

---

2. 학습 목표

1. Chart 컨트롤을 사용해 데이터를 시각적으로 표현.
2. 다양한 그래프 유형(Bar, Line, Pie)을 구성.
3. 데이터 시리즈를 동적으로 추가 및 업데이트.

---

3. Chart 컨트롤이란?

Chart 컨트롤은 Microsoft에서 제공하는 데이터 시각화 컨트롤로, 데이터를 그래프 형식으로 표현할 수 있습니다.

• 데이터 시각화를 통해 사용자 이해도를 높임.
• 다양한 차트 유형(Line, Bar, Pie 등)을 지원.

---

Chart 주요 구성 요소

구성 요소 설명

Series	데이터 시리즈(데이터 집합).
ChartArea	그래프가 그려질 영역.
Legend	그래프의 범례(Series에 대한 설명).

---

Chart 주요 속성

속성 설명 예제

Series.ChartType	차트 유형 설정	SeriesChartType.Bar, SeriesChartType.Line 등
Points.AddXY()	X, Y 값을 추가하여 데이터를 추가	series.Points.AddXY("항목1", 10);
ChartAreas	차트가 그려질 영역을 관리	chart1.ChartAreas.Add(new ChartArea());

---

4. 실습: Chart 컨트롤로 데이터 시각화 구현

요구사항

1. Chart 컨트롤에 막대 그래프(Bar Chart)와 꺾은선 그래프(Line Chart)를 표시.
2. 버튼을 통해 데이터를 동적으로 추가.
3. 원형 그래프(Pie Chart)로 데이터 시각화.

---

폼 구성

컨트롤 타입 이름 텍스트 위치 크기

Chart	chart1	(없음)	상단	(400 x 300)
Button	btnAddData	"데이터 추가"	하단 왼쪽	(150 x 30)
Button	btnChangeType	"차트 유형 변경"	하단 오른쪽	(150 x 30)

---

코드 작성

Form1.cs

using System;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        private int dataCounter = 1; // 데이터 항목 카운터
        private SeriesChartType currentChartType = SeriesChartType.Bar; // 기본 차트 유형

        public Form1()
        {
            InitializeComponent();
            InitializeChart();
        }

        private void InitializeChart()
        {
            // ChartArea 설정
            chart1.ChartAreas.Add(new ChartArea("MainArea"));

            // Series 설정
            var series = new Series("데이터 시리즈")
            {
                ChartType = currentChartType,
                ChartArea = "MainArea"
            };

            chart1.Series.Add(series);

            // 범례 설정
            chart1.Legends.Add(new Legend("MainLegend"));
            chart1.Legends[0].Docking = Docking.Top;

            // 초기 데이터 추가
            series.Points.AddXY("항목1", 10);
            series.Points.AddXY("항목2", 20);
            series.Points.AddXY("항목3", 30);
        }

        // "데이터 추가" 버튼 클릭 이벤트
        private void BtnAddData_Click(object sender, EventArgs e)
        {
            var series = chart1.Series["데이터 시리즈"];
            series.Points.AddXY($"항목{dataCounter + 3}", new Random().Next(10, 50));
            dataCounter++;
        }

        // "차트 유형 변경" 버튼 클릭 이벤트
        private void BtnChangeType_Click(object sender, EventArgs e)
        {
            currentChartType = currentChartType == SeriesChartType.Bar ? SeriesChartType.Pie : SeriesChartType.Bar;
            chart1.Series["데이터 시리즈"].ChartType = currentChartType;

            MessageBox.Show($"차트 유형이 '{currentChartType}'로 변경되었습니다.", "알림");
        }
    }
}

---

Form1.Designer.cs

namespace WindowsFormsApp1
{
    partial class Form1
    {
        private System.ComponentModel.IContainer components = null;
        private Chart chart1;
        private Button btnAddData;
        private Button btnChangeType;

        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        private void InitializeComponent()
        {
            this.chart1 = new Chart();
            this.btnAddData = new Button();
            this.btnChangeType = new Button();
            ((System.ComponentModel.ISupportInitialize)(this.chart1)).BeginInit();
            this.SuspendLayout();

            // chart1
            this.chart1.Location = new System.Drawing.Point(20, 20);
            this.chart1.Name = "chart1";
            this.chart1.Size = new System.Drawing.Size(400, 300);
            this.chart1.TabIndex = 0;

            // btnAddData
            this.btnAddData.Location = new System.Drawing.Point(20, 340);
            this.btnAddData.Name = "btnAddData";
            this.btnAddData.Size = new System.Drawing.Size(150, 30);
            this.btnAddData.TabIndex = 1;
            this.btnAddData.Text = "데이터 추가";
            this.btnAddData.UseVisualStyleBackColor = true;
            this.btnAddData.Click += new System.EventHandler(this.BtnAddData_Click);

            // btnChangeType
            this.btnChangeType.Location = new System.Drawing.Point(200, 340);
            this.btnChangeType.Name = "btnChangeType";
            this.btnChangeType.Size = new System.Drawing.Size(150, 30);
            this.btnChangeType.TabIndex = 2;
            this.btnChangeType.Text = "차트 유형 변경";
            this.btnChangeType.UseVisualStyleBackColor = true;
            this.btnChangeType.Click += new System.EventHandler(this.BtnChangeType_Click);

            // Form1
            this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 20F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(450, 400);
            this.Controls.Add(this.btnChangeType);
            this.Controls.Add(this.btnAddData);
            this.Controls.Add(this.chart1);
            this.Name = "Form1";
            this.Text = "Chart 컨트롤 예제";
            ((System.ComponentModel.ISupportInitialize)(this.chart1)).EndInit();
            this.ResumeLayout(false);
        }
    }
}

---

5. 실행 결과

1. 초기 상태
   • Chart 컨트롤에 기본 데이터("항목1", "항목2", "항목3")가 막대 그래프(Bar Chart)로 표시됩니다.
2. 데이터 추가
   • "데이터 추가" 버튼을 클릭하면 새로운 항목과 값이 그래프에 추가됩니다.
3. 차트 유형 변경
   • "차트 유형 변경" 버튼을 클릭하면 차트가 막대 그래프에서 원형 그래프로, 또는 그 반대로 변경됩니다.

---

6. 주요 개념 요약

1. Chart 컨트롤 구성 요소: ChartArea(그래프 영역), Series(데이터 시리즈), Legend(범례)를 조합하여 그래프를 구성.
2. Series.ChartType: Bar, Line, Pie 등 다양한 그래프 유형을 설정 가능.
3. 데이터 동적 추가: Series.Points.AddXY() 메서드를 사용해 그래프에 데이터를 동적으로 추가 가능.