C# - Winform Chart Control Example (8)

Winform Chart Control Example (8)

이번 예제에서 살펴볼 차트는 매우 간단한 모양이지만, 구현을 하기 위해 특별한 속성들을 사용해야 하는 것들이 있어서 정리를 해보려고 한다.  어떤 차트인지 그림을 먼저 살펴보자.

만들어야 하는 차트

 

일반 원형 차트이다. 각 아이템 별 매출 Percent를 한눈에 보기 쉽게 만들어주는 원형 차트인데, 특이한 것은 차트 Label의 값을 Customize 하여 보여줬다는 것이 핵심이다. 차트를 만드는 것은 매우 간단하므로 짧게 살펴보고, 속성 설정하는 부분만 조금 디테일하게 더 정리해 보겠다.

• 차트 데이터 구성
• Pie Chart 만들기 및 속성 설정하기
• Chart Label Keyword 정리

 

차트 데이터 구성

차트 데이터는 간단하다. 아래와 같은 값을 갖게끔 Datatable을 만들어 주면 된다.

Items	Values
컴퓨터	0.3
MP3	0.02
가전	0.38
자동차	0.3

private void SetData()
{
    this._dataSource = new DataTable();

    string[] items = new string[] { "컴퓨터", "MP3", "가전", "자동차" };
    double[] values = new double[] { 0.3, 0.02, 0.38, 0.3 };

    this._dataSource.Columns.Add("items");
    this._dataSource.Columns.Add("value");

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

        row[0] = items[i];
        row[1] = values[i]; 

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

}

 

Pie Chart 만들기 및 속성 설정하기

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

    this.chartControl.Titles.Add(new Title("사업 부문별 매출", Docking.Top,
                                            new Font("Malgun Gothic", 20, FontStyle.Bold), Color.Black));

    Legend chLegend = this.chartControl.Legends[0];
    chLegend.BorderWidth = 1;
    chLegend.BorderColor = Color.Black;
    chLegend.BorderDashStyle = ChartDashStyle.Solid;
    chLegend.Alignment = StringAlignment.Center;

    Series chSeries = this.chartControl.Series[0];

    chSeries.XValueMember = "items";
    chSeries.YValueMembers = "value";

    chSeries.ChartType = SeriesChartType.Pie;

    chSeries.BorderColor = Color.Black;
    chSeries.BorderDashStyle = ChartDashStyle.Solid;
    chSeries.BorderWidth = 1;

}

원형 차트를 만들기 위해 Chart Type을 SeriesChartType.Pie로 설정하였다. 그리고 각각 XValueMember와 YValueMembers 속성에 해당하는 DataGridView Column의 값을 입력하고, Legend와 Border 설정등을 마무리 해준 상태다. 여기까지 작성하고 실행해 보면 다음과 같이 나타난다.

현재까지 완성한 모습

Legend 설정은 모두 마무리가 되었지만, 원형 차트는 일부 수정이 필요할 것으로 보인다. 수정해야 하는 범위는 

1. 원형 차트 돌리기 (시작 각도 변경)
2. Label 표시 및 Label Text 변경

원형 차트를 돌리는 작업은 Pie Chart의 Custom Property를 사용해서 작업을 진행해야 한다.

Pie Chart 설정 시 확인할 수 있는 Custom Property 들

저 속성들 중에서 PieStartAngle 속성을 사용해서 Pie Chart를 돌릴 수 있고, PieLabel Style을 지정하여 Label이 표시되는 위치를 바꿀 수 있다.

private void SetChart()
{
    ...
    
    chSeries.SetCustomProperty("PieStartAngle", "270");
    chSeries.SetCustomProperty("PieLabelStyle", "OutSide");

}

현재까지 완성된 차트 모습

Pie Chart의 각도와 Label의 위치가 알맞게 변경된 것을 확인할 수 있다. 이제, 남은 것은 Label의 표시형식을 바꾸는 것인데, 일단 코드를 살펴보고 각 키워드에 대한 설명은 다음 챕터에서 자세하게 정리할 예정이니 해당 챕터를 확인하길 바란다.

private void SetChart()
{
    ...

    chSeries.Label = "#VALX \r\n #VALY \r\n #PERCENT{0.0%}";
    chSeries.LegendText = "#VALX";

}

 

 

Chart Label Keyword 정리

사용해 봤던 Label Keyword과 검색 찬스를 활용해서 나머지 Keyword까지 같이 정리를 해보았다. (좀 한참을 찾았는데 정리해 둔 괜찮은 사이트가 있었다. 차트 작성 시 참고해 주길 바라며... 오늘 포스팅은 여기에서 마무리하겠다.

Using Keywords

Keyword	내용	적용 대상	Multiple Y Values 적용 가능 유무
#VALX	Data Point의 X 값	Data Points만 가능	👍
#VAL, #VALY, #VALY2,#VALY3, ...	Data Point의 Y 값들	Data Points만 가능	👍
#SERIESNAME	Series 이름값 출력	Data Points와 Series 가능	-
#LABEL	Data Point Label 값	Data Points만 가능	-
#AXISLABEL	Data Point 축 Label 값	Data Points만 가능	-
#INDEX	Data Point Index 값	Data Points만 가능	-
#PERCENT	해당 Data Point의 값이 전체 Y VALUE 중에 차지하는 비율 (백분율)	Data Points만 가능	👍
#TOTAL	Y Values의 총 합	Series만 가능	👍
#LEGENDTEXT	Legend Text	Legend만 가능	-
#AVG	Y Values 평균값	Series만 가능	👍
#MIN	Y Values 최솟값	Series만 가능	👍
#MAX	Y Values 최대값	Series만 가능	👍
#FIRST	Y Values의 첫번째 값	Series만 가능	👍
#LAST	Y Values의 마지막 값	Series만 가능	👍