C# - Winform Chart Control Example (1)

Winform Chart Control Example (1)

C# Chart Control을 다루는 예제들을 블로그에 포스팅하여 정리하고자 한다. Excel 학습책에 있던 차트들을 보고 C# Winform에서 동일하게 만들어보는 것을 목표로 정리하고자 한다. 

목표는 Chart Control의 속성을 최대한 적게 사용하고 오로지 C# Code만으로 Chart를 편집하면서 Chart Control 구조와 속성, 이벤트 등을 사용하기 위한 목적이다.

이번 포스팅에서 만들어 볼 차트는 다음과 같다.

만들어 볼 Chart 예제 이미지

매우 간단한 차트인데 이를 순수 코딩으로만 어떻게 구현하는지 한 번 살펴보자. 아래 순서대로 작성될 예정이다.

• 기본 데이터 세팅하기
• Chart - DataSource 설정
• Chart - Title 추가
• Chart - Series 작업
• Chart - ChartArea (X축, Y축) 작업
• 기타 세부 수정

 

기본 데이터 세팅하기

차트 컨트롤 자체를 조작하는 것이 포커스가 된 포스팅이기에 데이터를 세팅하는 것은 가볍게 살펴보자. 

하드코딩으로 아래와 같이 데이터를 세팅하였다. Chart 컨트롤의 DataSource를 쉽게 설정할 수 있게 DataTable을 활용하여 기본 데이터를 세팅하였다.

public partial class ChartExample_1_Form : Form
{

    private DataTable dataSource;

    public ChartExample_1_Form()
    {
        InitializeComponent();

        this.SetData();
    }

    private void SetData()
    {
        this.dataSource = new DataTable("ChartData");

        string[] years = new string[] { "2000년", "2001년", "2002년", "2003년", "2004년", "2005년", "2006년" };
        int[] prices = new int[] { 800000, 1800000, 2400000, 1420000, 1920000, 3200000, 4800000 };

        this.dataSource.Columns.Add("Year");
        this.dataSource.Columns.Add("Price");

        for (int i = 0; i < years.Length; i++)
        {
            DataRow row = this.dataSource.NewRow();

            row[0] = years[i]; 
            row[1] = prices[i];

            this.dataSource.Rows.Add(row); 
        }
    }
}

 

Chart - DataSource 설정

SetChart()라는 메서드를 추가하고, 생성자에서 SetData() 메서드 호출 후 바로 Chart 설정도 될 수 있게 위 코드에서 다음과 같이 추가하였다.

public partial class ChartExample_1_Form : Form
{

    private DataTable dataSource;

    public ChartExample_1_Form()
    {
        InitializeComponent();

        this.SetData();
        this.SetChart();
    }

    private void SetData()
    {
        ...
    }
    
    private void SetChart() 
    {
    
    }
}

SetChart 메서드에 제일 먼저 작업할 내용으로 Chart Control에 DataSource를 설정하는 것이다. DataTable 객체를 활용해서 Data Source를 설정하고 그 이후에 각각 X축 데이터 Y축 데이터로 DataTable 객체 안의 어떤 컬럼 데이터를 사용할 것인지 세팅해 주면 된다. 현재 나는 Chart Control을 추가하고 해당 컨트롤의 이름을 chartControl로 변경해 둔 상태다.

private void SetChart()
{
    this.chartControl.DataSource = this.dataSource;

    this.chartControl.Series[0].XValueMember = "Year";
    this.chartControl.Series[0].YValueMembers = "Price";
    
 }

Chart Control을 Form에 추가하면 기본적으로 Series 객체가 하나 추가되어 있는 상태인데 기본 Series를 삭제하지 않고 활용하기 위해 바로 저렇게 사용하였다.

 

Chart - Title 추가

이제 차트의 Title을 추가해 보자.

Chart Title 추가하기 전에 코드 작성에 도움이 될 수 있게 아래 NameSpace를 추가해 주자.

using System.Windows.Forms.DataVisualization.Charting;

Chart 컨트롤에 Title을 추가하는 것은 간단하다. Chart Control을 추가한 기본 상태에서는 Title 자체가 없는 상태이기 때문에 아래와 같이 바로 Add에서 새로운 Title을 추가해줘야만 한다.

private void SetChart()
{
    ...
    
    this.chartControl.Titles.Add(
        new Title("2000년 ~ 2006년 매출 실적 추이", Docking.Top,
                    new Font("Malgun Gothic", 20, FontStyle.Bold), Color.Black)
        );
}

Chart Title의 생성자를 살펴보면 다음과 같다.

Chart Title 생성자

타이틀로 보여줄 string 값과, 차트 제목을 어디에 위치할 것인지 지정하는 Docking 옵션, 그리고 Font 설정과 색상등을 인자로 사용하고 있는 것을 볼 수 있다.  여기까지 작성하고 실행해 보면 다음과 같이 나타난다.

Chart Title 설정까지만 완료한 모습

 

Chart - Series 작업

이제는 Series 객체를 사용하여 Chart의 유형을 바꾸고 바꾼 Chart 타입에 맞게 세부 설정들을 바꿔주면 된다. 현재 기본으로 추가된 Chart는 가로 막대형 차트로 우리는 꺾은선 형 차트로 변경을 해줘야만 한다. 그리고 꺾은선 마크와 색상등을 변경해 주면 된다. 기본으로 추가된 Chart Control에는 Series 객체가 하나 이미 추가된 상태이기 때문에 다음과 같이 작성해도 된다.

private void SetChart()
{
    ...
    
    Series chartSeries = this.chartControl.Series[0];

    chartSeries.ChartType = SeriesChartType.Line;
    chartSeries.MarkerStyle = MarkerStyle.Diamond;
    chartSeries.MarkerSize = 10;
    chartSeries.MarkerColor = Color.Blue;
}

기본으로 추가되어 있는 Series 객체를 선택하고 ChartType을 변경한 이후 상세 설정을 하는 코드다. 위와 같이 작성하고 실행해 보면 다음과 같이 확인할 수 있다.

Series까지 변경한 모습

 

Chart - ChartArea (X축, Y축) 작업

현재 완성한 모습	완성해야 하는 모습
Series까지 변경한 모습	만들어 볼 Chart 예제 이미지

Chart Area 작업은 해야 할 것이 좀 있다. 우선 각 X축과 Y축 설정을 변경해줘야 하고, 차트가 보이고 있는 뒷 배경에 대한 작업들도 해줘야 한다. 만약, 차트 컨트롤 내의 각 요소들에 대한 이해가 없는 분들이라면 아래 포스팅을 먼저 확인하고 오길 바란다.

2024.12.30 - [C#/Winform (.Net Framework)] - C# - Winform Chart Control 정리

C# - Winform Chart Control 정리

private void SetChart() 
{
    ...
    
    ChartArea chArea = this.chartControl.ChartAreas[0];

    /// AxisX - X축 설정 변경 ///
    // X축에서 올라오는 주구분선이 없기에 사용하지 않게끔 변경
    chArea.AxisX.MajorGrid.Enabled = false;
    chArea.AxisX.LabelStyle.IntervalOffset = 0.5;
    chArea.AxisX.Minimum = 0.5;
    chArea.AxisX.Maximum = this.dataSource.Rows.Count + 0.5;
    chArea.AxisX.MajorTickMark.TickMarkStyle = TickMarkStyle.InsideArea;

    /// AxisY - Y축 설정 변경 ///
    chArea.AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dot;
    chArea.AxisY.MajorTickMark.TickMarkStyle = TickMarkStyle.InsideArea;
    chArea.AxisY.Maximum = 6000000;
    chArea.AxisY.Interval = 1000000;
    // Y축에 보여지는 Label String Format을 지정 (엑셀 표시형식과 같다. 양수;음수;그 외)
    chArea.AxisY.LabelStyle.Format = "#,##0;#,##0;-";

    chArea.BackColor = Color.LightGray;

}

위에서 살펴볼 점은 AxisX 축에서 IntervalOffset을 0.5 값으로 지정한 부분이다. 현재 기본으로 보이고 있는 차트의 X축은 MainTickMark에 맞춰서 값이 꺾어지고 있는 것을 볼 수 있다. 근데 우리가 만들어야 하는 차트는 MainTickMark 사이에 위치하게끔 해야 하기 때문에 IntervalOffset (기본값 = 1)을 0.5로 변경해 준 것이다. 그에 맞춰서 Minimum과 Maximum 값도 변경하였다.

그리고 Label Format은 주석으로도 작성해 뒀지만, Excel 표시형식과 동일하다. "양수; 음수; 그 외"의 포맷에 맞게 작성하면 Excel 표시형식과 동일하게 동작하는 것을 확인할 수 있다.

Chart Area 설정까지 마친 모습

 

기타 세부 수정

Chart Area 작업까지 완료했으나 아직 완료가 되지 않았다. 비교해서 살펴보자.

현재 완성한 모습	완성해야 하는 모습
Chart Area 설정까지 마친 모습

차트 꺾은선 Mark 위에 데이터 값이 보여야 하고, 우측에 있는 Legend도 사라져야 한다. 이를 위한 설정은 아래와 같이 마무리하면 된다.

private void SetChart() 
{
    ...
    
    chartSeries.IsValueShownAsLabel = true;
    chartSeries.LabelFormat = "#,##0;#,##0;-";

    this.chartControl.Legends.RemoveAt(0);
}

Series 객체에서 차트에 값 라벨을 표시할 것인지 설정하는 IsValueShownAsLabel 속성을 True로 변경하고 LabelFormat을 Chart Area AxisY 축에서 설정했던 것과 같은 방법으로 설정해 주면 된다. Legend는 필요가 없으니 지우면 된다.