[C# 윈폼] C# MS Chart에서 X축 Label 2줄로 표시하는 방법

안녕하세요.

 

오늘은 C# 윈폼에서 기본으로 제공해주는 컨트롤 중 하나인 차트 컨트롤에 대해서 알아보려고 합니다.

 

그 중에서도, X축 Label을 2줄로 표시하는 방법에 대해서 예제 코드를 통해서 보여드리려고 해요.

 

실제 실무에서 프로젝트를 하다가, 특정 날짜별 그 안에 해당하는 어떤 정보 리스트들을 2줄로 차트에 표시해서 보여줘야 했던 적이 있었는데요.

 

구글링을 하다가 알게된 소스코드로써, 직접 제가 구현한 로직은 아니고 다음에 다시 같은 기능을 추가할 때 유용하게 쓰려고 포스팅을 작성하게 됐습니다!^^

 

제가 직접 짠 코드가 아닌 점, 참고해주세요~~

 

우선 기본적으로 빈 프로젝트의 윈폼 프로젝트를 생성해서 아래와 같이 차트 컨트롤과 버튼 컨트롤을 하나 씩 배치하였습니다.

 

윈폼 차트, 버튼 컨트롤 배치

위에서 저는 Chart라는 버튼을 클릭했을 때, 차트에 데이터가 그려지게 끔 예제 코드를 작성해 볼거에요.

 

예제 코드

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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

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; using System.Windows.Forms.DataVisualization.Charting;   namespace test123 {     public partial class Form1 : Form     {         public Form1()         {             InitializeComponent();               uiBtn_Chart.Click += uiBtn_Chart_Click;         }           private void uiBtn_Chart_Click(object sender, EventArgs e)         {             // fill the data table with values             var dt = new DataTable();             dt.Columns.Add("Id", typeof(int));             dt.Columns.Add("Name", typeof(string));             dt.Columns.Add("School", typeof(string));             dt.Columns.Add("Score", typeof(int));               dt.Rows.Add(0, "범범조조", "School1", 100);             dt.Rows.Add(1, "안정환", "School1", 30);             dt.Rows.Add(2, "류현진", "School1", 40);             dt.Rows.Add(3, "정형돈", "School2", 80);             dt.Rows.Add(4, "김성주", "School2", 70);               // bind the data table to chart             this.chart1.Series.Clear();               var series = this.chart1.Series.Add("Series 1");             series.XValueMember = "Id";             series.YValueMembers = "Score";               //series.ChartType = SeriesChartType.Column;             this.chart1.DataSource = dt;             this.chart1.DataBind();               // custom labels              foreach (var g in dt.AsEnumerable().GroupBy(x => x.Field<string>("School")))             {                 string school = g.Key;                 var names = g.Select(r => new { Id = r.Field<int>("Id"),                     Name = r.Field<string>("Name") });                 // find min-max                 int min = names.Min(y => y.Id);                 int max = names.Max(y => y.Id);                 // city labels                 foreach (var name in names)                 {                     var label = new CustomLabel(name.Id - 1, name.Id + 1,                         name.Name, 0, LabelMarkStyle.None);                     this.chart1.ChartAreas[0].AxisX.CustomLabels.Add(label);                 }                 // city states                 var statelabel = new CustomLabel(min, max, school, 1,                      LabelMarkStyle.LineSideMark);                 this.chart1.ChartAreas[0].AxisX.CustomLabels.Add(statelabel);             }         }     } }   Colored by Color Scripter

cs

 

실행 결과

위와 같이 코드를 작성하여 해당 프로젝트를 실행시켜 보면 위와 같은 결과가 나오게 됩니다.

 

같은 학교별, 학생들을 기준으로 차트에 데이터를 넣어주고 여기서 핵심인 부분은 CustomLabel을 이용하여 X축 Label을 2줄로 표현을 했다는 점입니다.

 

이 기능을 이용하여, 위와 같이 그룹별로 차트에 시각화할 수 있기 때문에 사용방법을 익히시면 매우 유용하게 사용하실 수 있으실 거에요!^^

 

감사합니다~~