차트 타입

차트의 타입은 시리즈의 데이터를 어떤 방식으로 보여줄 것인가를 지정한다. 35가지의 차트 타입이 있다. 다 찍어서 눈으로 확인해 보자. 기존 실습 프로젝트와는 용도가 조금 다르므로 charttype 새 프로젝트를 만든다. 루프를 돌며 차트 컨트롤을 만들고 75행으로 나열하면 된다. 4개의 정수값을 주고 모양을 분명히 살펴 보기 위해 그리드는 제거하였다.

 

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 charttype {

        public partial class Form1 : Form {

                   public Form1()

                   {

                              InitializeComponent();

                   }

 

                   Chart[] arChart = new Chart[35];

                   SeriesChartType[] arType = new SeriesChartType []

                   {

                              SeriesChartType.Column, SeriesChartType.Bar, SeriesChartType.Line,

                              SeriesChartType.StepLine, SeriesChartType.Spline, SeriesChartType.Area,

                           SeriesChartType.SplineArea,SeriesChartType.Range,SeriesChartType.SplineRange,

                              SeriesChartType.RangeBar, SeriesChartType.RangeColumn, SeriesChartType.Pie,

                              SeriesChartType.Doughnut, SeriesChartType.Pyramid ,SeriesChartType.Funnel,

                              SeriesChartType.ThreeLineBreak, SeriesChartType.PointAndFigure ,SeriesChartType.Polar,

                              SeriesChartType.Radar, SeriesChartType.BoxPlot, SeriesChartType.Point,

                              SeriesChartType.Bubble, SeriesChartType.Stock, SeriesChartType.Candlestick,

                              SeriesChartType.ErrorBar, SeriesChartType.Kagi, SeriesChartType.Renko,

                              SeriesChartType.StackedArea, SeriesChartType.StackedArea100, SeriesChartType.StackedBar,

                              SeriesChartType.StackedBar100,SeriesChartType.StackedColumn,

                              SeriesChartType.StackedColumn100, SeriesChartType.FastLine, SeriesChartType.FastPoint

                   };

 

                   private void Form1_Load(object sender, EventArgs e)

                   {

                              int i = 0;

                              for (int y=0;y<5;y++)

                              {

                                        for (int x = 0; x < 7; x++)

                                        {

                                                   arChart[i] = new Chart();

                                                   arChart[i].Left = x * 190;

                                                   arChart[i].Top = y * 170;

                                                   arChart[i].Width = 180;

                                                   arChart[i].Height = 160;

                                                   arChart[i].ChartAreas.Add("main");

                                                   arChart[i].ChartAreas[0].AxisX.MajorGrid.Enabled = false;

                                                   arChart[i].ChartAreas[0].AxisY.MajorGrid.Enabled = false;

                                                   arChart[i].Series.Add("main");

                                                   arChart[i].Series[0].Points.DataBindY(new int[] { 22, 44, 33, 55 });

                                                   arChart[i].Series[0].Points[0].Color = Color.Blue;

                                                   arChart[i].Series[0].Points[1].Color = Color.Red;

                                                   arChart[i].Series[0].Points[2].Color = Color.Green;

                                                   arChart[i].Series[0].Points[3].Color = Color.Purple;

                                                   arChart[i].Series[0].ChartType = arType[i];

                                                   arChart[i].Titles.Add("");

                                                   arChart[i].Titles[0].Text = arType[i].ToString();

                                                   Controls.Add(arChart[i]);

                                                   i++;

                                        }

                              }

                   }

        }

}

 

이럴 때는 디자이너로 일일이 클릭해서 속성 조정하는 것보다 역시 코드가 편리하다. 위쪽 타이틀에 차트 타입을 표시했다.

 

 

대충만 관찰해 봐도 각 타입이 데이터를 어떻게 그리는지 알 수 있다. 똑같아 보이는 타입도 있지만 이는 데이터가 같아서 당장 같아 보일 뿐이며 여러 개의 데이터를 주면 달라질 수도 있다. 각 타입의 특징을 잘 알아 두고 목적에 딱 맞는 타입을 잘 골라야 한다.

개별 차트 타입도 다양하지만 여러 타입을 하나의 에리어에 같이 표시하면 더 다양한 형태의 차트를 그릴 수 있다. 그러나 모든 타입을 동시에 표시할 수 있는 것은 아니다. 대표적으로 ColumnBar는 축의 방향이 달라 같이 표시할 수 없으며 예외로 처리된다.

또한 PiePyramid 처럼 전체 영역을 다 사용하는 타입은 단독으로만 표시할 수 있다. 두 개 이상의 차트를 한 에리어에 같이 표시해 보자. 시리즈를 겹칠 때의 효과는 차트 타입에 따라 다르다. chartTest 예제에 코드를 작성하되 이번에는 범례를 살려 두자.

 

- 나란히 그리기(Cluster) : 하나씩 순서대로 그린다. Column이나 Bar 타입의 시리즈를 여러 개 표시할 때 이런 형태가 된다. 각 학생에 대해 세 과목의 성적을 동시에 그리려면 다음과 같이 한다.

 

private void Form1_Load(object sender, EventArgs e)

{

       chart1.Series[0].Name = "국어";

       chart1.Series[0].Points.DataBindY(new int[] { 22, 44, 33, 55 });

       chart1.Series[0].ChartType = SeriesChartType.Column;

       chart1.Series.Add("영어");

       chart1.Series[1].Points.DataBindY(new int[] { 40, 30, 60, 20 });

       chart1.Series[1].ChartType = SeriesChartType.Column;

       chart1.Series.Add("수학");

       chart1.Series[2].Points.DataBindY(new int[] { 50, 40, 20, 30 });

       chart1.Series[2].ChartType = SeriesChartType.Column;

}

디자인 타임에 배치한 차트는 Series[0] 하나만 자동 생성해 주므로 더 필요한 시리즈는 직접 만들어야 한다. 각 막대의 색상은 개별적으로 지정할 수 있다.

- 포개기(Overlap) : 같은 공간에 겹쳐서 그린다. 순서값이 빠른 시리즈를 먼저 그리므로 겹치는 부분은 순서값이 높은 시리즈가 위쪽에 온다.

 

private void Form1_Load(object sender, EventArgs e)

{

       chart1.Series[0].Name = "국어";

       chart1.Series[0].Points.DataBindY(new int[] { 22, 44, 33, 55 });

       chart1.Series[0].ChartType = SeriesChartType.Column;

       chart1.Series.Add("영어");

       chart1.Series[1].Points.DataBindY(new int[] { 40, 30, 60, 20 });

       chart1.Series[1].ChartType = SeriesChartType.Line;

       chart1.Series[1].BorderWidth = 4;

       chart1.Series.Add("수학");

       chart1.Series[2].Points.DataBindY(new int[] { 50, 40, 20, 30 });

       chart1.Series[2].ChartType = SeriesChartType.Spline;

       chart1.Series[2].BorderWidth = 4;

}

영어 성적은 Line 타입으로, 수학 성적은 Spline 타입으로 표시했다. 선이 얇으면 잘 보이지 않아 굵기를 4로 두텁게 칠했다. 영어와 수학이 겹치는 부분에는 순서가 뒤쪽인 수학 그래프가 더 위쪽에 있음을 유의하자. 국어는 물론 제일 아래쪽에 있다. 이 순서를 조정하려면 시리즈의 순서를 바꿔야 한다.

 

- 쌓기(Statck) : 한 시리즈 위쪽에 다음 시리즈의 값을 얹어서 보여 준다. 여러 값의 총합을 한눈에 파악할 수 있어 편리하다.

 

private void Form1_Load(object sender, EventArgs e)

{

       chart1.Series[0].Name = "국어";

       chart1.Series[0].Points.DataBindY(new int[] { 22, 44, 33, 55 });

       chart1.Series[0].ChartType = SeriesChartType.StackedColumn;

       chart1.Series.Add("영어");

       chart1.Series[1].Points.DataBindY(new int[] { 40, 30, 60, 20 });

       chart1.Series[1].ChartType = SeriesChartType.StackedColumn;

       chart1.Series[1].BorderWidth = 4;

       chart1.Series.Add("수학");

       chart1.Series[2].Points.DataBindY(new int[] { 50, 40, 20, 30 });

       chart1.Series[2].ChartType = SeriesChartType.StackedColumn;

       chart1.Series[2].BorderWidth = 4;

}

각 학생의 총점을 비교할 수 있고 한 학생의 국어, 영어, 수학 성적 비율도 쉽게 가늠할 수 있다. StackedBar 타입으로 바꾸면 학생 번호가 Y축으로 이동하고 성적이 X축으로 이동하여 가로 모양의 막대 그래프가 된다.  

StackedColumn100 타입으로 바꾸면 전체를 100으로 한 비율을 보여 준다.

스택드 타입은 시리즈 여러 개를 한꺼번에 보여주는 방식이다. 시리즈만 여러개일 뿐 각 시리즈의 Y값은 하나뿐이다. 이에 비해 시리즈 하나에 여러 개의 Y값이 들어가는 타입도 있다. 앞에서 잠시 구경해 본 CandleStick 타입이 멀티 Y 값을 사용하는 대표적인 예이며 Stock 타입도 구조가 비슷하다.

 

private void Form1_Load(object sender, EventArgs e)

{

       chart1.Series[0].ChartType = SeriesChartType.Stock;

       chart1.Series[0].CustomProperties = "OpenCloseStyle=Triangle";

       chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;

       chart1.Series[0].Points.AddY(900, 1600, 1000, 1500);

       chart1.Series[0].Points.AddY(1000, 1700, 1200, 1600);

       chart1.Series[0].Points.AddY(1200, 500, 1000, 600);

}

주식 시세는 시가, 종가, 고가, 저가 4개의 값으로 구성되며 X값 하나에 대해 4개의 Y값이 있어야 제대로 표현된다. 여러 개의 Y값을 가지는 시리즈와 단일 값을 가지는 시리즈를 같은 에리어에 표현할 수도 있다. 예를 들어 위쪽에서는 주식 시세를 캔들 차트로 그리고 아래쪽에는 거래량을 그리면 된다.

 

private void Form1_Load(object sender, EventArgs e)

{

       chart1.Series[0].ChartType = SeriesChartType.Candlestick;

       chart1.Series[0].CustomProperties = "PriceDownColor=Blue, PriceUpColor=Red";

       chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;

       chart1.Series[0].Points.AddY(900, 1600, 1000, 1500);

       chart1.Series[0].Points.AddY(1000, 1700, 1200, 1600);

       chart1.Series[0].Points.AddY(1200, 500, 1000, 600);

 

       chart1.Series.Add("거래량");

       chart1.Series[1].Points.DataBindY(new int[] { 400, 350, 280 });

       chart1.Series[1].ChartType = SeriesChartType.Column;

}

여기에 Line 차트로 이동 평균선까지 그려 넣으면 그럴 듯한 주식 차트를 만들 수 있다. 하지만 이 경우는 가격과 거래량의 단위가 달라 좀 억지스럽다. 가격은 몇천원인데 거래량은 몇만주이면 가격이 거래량에 가려 보이지도 않을 것이다. 두 값을 동시에 꼭 같이 표시하려면 에리어를 하나 더 만드는 것이 합당하다.

 

private void Form1_Load(object sender, EventArgs e)

{

       chart1.Series[0].ChartType = SeriesChartType.Candlestick;

       chart1.Series[0].CustomProperties = "PriceDownColor=Blue, PriceUpColor=Red";

       chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;

       chart1.Series[0].Points.AddY(900, 1600, 1000, 1500);

       chart1.Series[0].Points.AddY(1000, 1700, 1200, 1600);

       chart1.Series[0].Points.AddY(1200, 500, 1000, 600);

 

       chart1.ChartAreas.Add("거래량");

       chart1.Series.Add("거래량");

       chart1.Series[1].Points.DataBindY(new int[] { 40000, 35000, 28000 });

       chart1.Series[1].ChartType = SeriesChartType.Column;

       chart1.Series[1].ChartArea = "거래량";

}

두 에리어의 높이 비율은 얼마든지 조정할 수 있고 위쪽 에리어의 X축은 아예 없애 버릴 수도 있다. 아니면 각 시리즈의 Y축을 서로 다르게 만들 수도 있다. 시리즈를 조합하는 방식만 해도 엄청나게 다양한데 에리어까지 분리할 수 있어 차트의 표현력이 무궁무진하다.