차트 요소

애노테이션

애노테이션은 설명이나 강조를 위해 차트에 배치하는 일종의 도형이다. Annotation 클래스로부터 13개의 클래스가 파생되며 각자 모양이나 용도가 다르다.

이 중 2개의 애노테이션을 생성하여 차트에 배치해 보자. 축을 기준으로 상대 좌표에 놓을 수도 있고 특정 데이터 포인트에 부착할 수도 있다. 원하는 객체를 생성하고 속성을 조정한 후 차트의 Annotations 컬렉션에 추가하면 화면에 나타난다.

private void Form1_Load(object sender, EventArgs e)

{

Random R = new Random(100);

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

{

chart1.Series[0].Points.AddY(R.Next(10, 100));

}

Border3DAnnotation b3d = new Border3DAnnotation();

b3d.BackColor = Color.Lime;

b3d.Text = "최저";

b3d.Width = 13;

b3d.Height = 12;

b3d.AnchorDataPoint = chart1.Series[0].Points[1];

chart1.Annotations.Add(b3d);

ArrowAnnotation aa = new ArrowAnnotation();

aa.ArrowStyle = ArrowStyle.Simple;

aa.Height = -10;

aa.Width = 0;

aa.ArrowSize = 7;

aa.LineColor = Color.Red;

aa.LineWidth = 2;

aa.BackColor = Color.Yellow;

aa.AnchorDataPoint = chart1.Series[0].Points[2];

aa.AnchorOffsetY = -2;

aa.AllowMoving = true;

chart1.Annotations.Add(aa);

}

두 번째, 세 번째 데이터 포인트 위에 애노테이션을 붙였다. 코드에서 보다시피 크기, 색상, 굵기, 모양, 거리, 이동 여부 등을 세세하게 조정할 수 있다. 화살표 애노테이션은 마우스로 드래그하여 이동할 수도 있다.

필요한 속성은 거의 다 있지만 타입별로 속성이 다르고 사용 방법도 상이해 한번에 다 알기는 어렵다. 이럴 때는 코드로 속성을 바꿔 보는 것보다 디자이너에서 속성을 바꿔 가며 실시간으로 효과를 확인해 보는 것이 좋다.

양이 너무 많으니 여기서는 애노테이션의 용도 정도만 소개하고 필요할 때 레퍼런스를 참고하여 사용해 보자. 클래스가 너무 많아 여기서 일일이 설명할 수가 없다. 솔직히 다 써 보지도 않았다.

커스텀 그리기

차트는 여러 가지 객체로 그래프는 물론이고 설명, 꾸미기 등의 다양한 출력을 지원하지만 그럼에도 불구하고 추가 정보를 차트 위에 더 그릴 필요가 있다. 최종적으로 원하는 모양을 마음대로 그리려면 이벤트를 처리해야 한다.

차트는 그리기 전에 PrePaint 이벤트를 호출하고 그린 후에 PostPaint 이벤트를 호출한다. 이 이벤트에 대한 핸들러를 설치하면 차트 위에 무엇이든지 그릴 수 있다.

private void Form1_Load(object sender, EventArgs e)

{

Random R = new Random(100);

double value = 30;

for (int i = 0; i < 30; i++)

{

value += R.Next(-9, 9);

chart1.Series[0].Points.AddXY(i, value);

}

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

chart1.Series[0].Color = Color.Blue;

chart1.Series[0].BorderWidth = 2;

chart1.PostPaint += PostPaintHandler;

}

void PostPaintHandler(object sender, ChartPaintEventArgs e)

{

Debug.WriteLine(e.ChartElement + " => " + e.Position);

e.ChartGraphics.Graphics.DrawEllipse(Pens.Red, 60, 90, 200, 100);

}

라인 그래프를 하나 배치하고 PostPaint 이벤트에 대한 핸들러를 등록하면 차트를 다 그린 후 이 이벤트를 호출한다. 인수로 ChartPaintEventArgs 객체를 전달하여 그리기에 필요한 정보를 알려 준다.

속성	설명
Chart	그리기 대상 차트이다.
ChartElement	차트의 어떤 부분을 그리고 있는지 알려 준다.
ChartGraphics	그리기에 필요한 정보를 가지는 객체이다. 이 객체 안의 Graphics 속성이 GDI+의 그리기 객체이며 그 외에 좌표 변환을 처리하는 메서드가 포함되어 있다.
Position	그리는 요소의 위치 정보가 저장되어 있다.

코드에서는 이벤트 인수의 주요 정보를 디버깅 창에 출력하고 그래픽 객체를 사용하여 적당한 크기의 타원을 그렸다. 출력된 디버깅 정보는 다음과 같다.

Series-Series1=>10.35352, 6.15, 64.91257, 81.1875

ChartArea-ChartArea1=>10.35352, 6.15, 64.91257, 81.1875

LegendCell-LegendCell1=>80.5383, 4.516129, 5.175983, 4.516129

LegendCell-LegendCell2=>85.71429, 4.516129, 9.730849, 4.516129

Legend-Legend1=>Auto

System.Windows.Forms.DataVisualization.Charting.Chart=>0, 0, 100, 100

시리즈, 에리어, 범례, 차트를 그릴 때마다 이 이벤트가 호출되며 각 요소가 어디쯤에 있는지 알려 준다. 차트를 다 그린 후 그 위에 타원을 그렸다.

과연 타원이 잘 그려지기는 했다. 그러나 이 타원의 좌표는 픽셀 단위여서 차트의 크기와는 상관없이 항상 일정하다. 폼을 작게 축소해도 타원은 차트와는 완전히 따로 논다.

차트는 크기와 상관없이 일정한 모양을 유지하기 위해 상대 좌표계를 사용한다. 좌상단이 (0,0)이고 우하단은 (100, 100)이며 중간의 좌표는 상대적인 비율에 따라 결정된다. 차트 정중앙은 (50, 50)이다.

디버깅 창에 출력한 차트 요소의 위치를 보면 다 0 ~ 100 사이의 좌표임을 알 수 있다. 차트의 모든 요소는 우하단을 100%로 한 백분율 좌표이다. 따라서 직접 그릴 때는 원하는 상대 좌표를 픽셀 좌표로 바꾸어 사용해야 한다.

좌표간의 변환은 ChartGraphics 객체가 제공하며 PointF, SizeF, RectangleF를 상호 변환한다. 백분율 좌표이다 보니 모든 좌표는 실수이다. 제일 간단한 좌표 변환 메서드부터 보자.

PointF GetAbsolutePoint(PointF)

PointF GetRelativePoint(PointF)

아주 직관적이다. 상대 좌표를 주면 절대 좌표로 바꿔 주고 절대 좌표를 주면 상대 좌표로 바꿔 준다. SizeF나 RectangleF로 마찬가지이다.

SizeF GetAbsoluteSize (SizeF size);

SizeF GetRelativeSize (SizeF size);

RectangleF GetAbsoluteRectangle (RectangleF rectangle);

RectangleF GetRelativeRectangle (RectangleF rectangle);

타원은 사각 영역이므로 GetAbsoluteRectangle 메서드로 픽셀 좌표를 구하면 된다.

void PostPaintHandler(object sender, ChartPaintEventArgs e)

{

RectangleF relRect = new RectangleF(30, 30, 40, 40);

RectangleF absRect = e.ChartGraphics.GetAbsoluteRectangle(relRect);

e.ChartGraphics.Graphics.DrawEllipse(Pens.Red, absRect);

}

(30, 30) 상대 좌표에서 폭과 높이가 각각 40 크기인 사각형을 정의했다. 폭이나 높이나 30% ~ 70%까지에 걸치는 중앙에 위치한 타원 좌표이다. 이 상대 좌표를 GetAbsoluteRectangle 메서드로 픽셀 좌표를 구하고 이 좌표에 타원을 그렸다.

차트의 중앙(에리어의 중앙이 아니고)에 타원이 그려지며 차트의 크기가 바뀌어도 항상 중앙에 그려진다.

이 변환 메서드를 사용하면 상대 좌표와 절대 좌표를 자유롭게 변환하여 차트의 원하는 곳에 원하는 도형을 자유롭게 그릴 수 있다. 다음 예제는 차트의 임의 영역에 마우스를 갖다 대면 현재 위치와 값을 보여준다.

void PostPaintHandler(object sender, ChartPaintEventArgs e)

{

if (e.ChartElement != chart1.ChartAreas[0]) return;

ChartArea area = chart1.ChartAreas[0];

Graphics g = e.ChartGraphics.Graphics;

// X축의 범위를 구함

double xstart = area.AxisX.ValueToPixelPosition(area.AxisX.Minimum);

double xend = area.AxisX.ValueToPixelPosition(area.AxisX.Maximum);

// 범위 바깥이면 리턴

Point pt = PointToClient(MousePosition);

if (pt.X < xstart || pt.X > xend) return;

// 수직선 그림

Pen vertPen = new Pen(Color.Gray, 2);

vertPen.DashStyle = DashStyle.Dash;

RectangleF rtArea = e.ChartGraphics.GetAbsoluteRectangle(e.Position.ToRectangleF());

g.DrawLine(vertPen, pt.X, rtArea.Y, pt.X, rtArea.Bottom);

// 사각형 그림

Rectangle rt = new Rectangle(pt.X + 10, pt.Y, 100, 80);

if (rt.Right > xend) rt.X = pt.X - 110;

if (rt.Bottom > rtArea.Bottom) rt.Y = pt.Y - 80;

g.FillRectangle(new SolidBrush(Color.FromArgb(128, 255, 255, 0)), rt);

g.DrawRectangle(Pens.Gray, rt);

// 커서 위치의 X, Y값을 찾는다.

double x = Math.Round(area.AxisX.PixelPositionToValue(pt.X), 2);

double y = 0;

foreach (DataPoint p in chart1.Series[0].Points)

{

if (p.XValue > x)

{

y = p.YValues[0];

break;

}

}

String content = String.Format("pt.X = {0}\nX={1}\nY={2}", pt.X, x, y);

g.DrawString(content, Font, Brushes.Black, rt.X + 10, rt.Y + 10);

}

private void chart1_MouseMove(object sender, MouseEventArgs e)

{

chart1.Invalidate();

}

마우스가 움직일 때마다 차트를 다시 그려야 하므로 MouseMove 이벤트 핸들러에서 Invalidate를 호출한다. 차트를 완전히 다시 그리고 PostPaint 메서드도 호출된다.

그리기 이벤트가 들어오면 먼저 그리기 대상이 에리어인지 점검한다. 앞에서 이벤트 인수를 덤프해 봤는데 PostPoint는 에리어뿐만 아니라 시리즈, 범례 등에 대해서도 발생한다. 이때는 굳이 반복적인 그리기를 할 필요가 없다.

다음은 마우스가 차트 안에 있는지 점검한다. 범례나 차트 왼쪽에 있으면 굳이 그릴 필요가 없다. 범위 점검을 위해 X축의 좌표를 구한다. 이때는 다음 메서드를 사용한다.

double ValueToPosition (double axisValue);

double ValueToPixelPosition (double axisValue);

X축의 값을 주면 각 값이 차트의 어디쯤에 있는지 좌표를 리턴하되 각각 상대 좌표와 픽셀 좌표이다. AxisX의 Minimum과 Maximum에 대해 상대 좌표를 조사하면 대략 10 ~ 75 범위가 된다. 차트폭의 10%에서 X축이 시작해서 75%까지 차지하는데 범례를 빼면 오른쪽 범위가 더 늘어난다.

마우스 커서와 비교하려면 아예 픽셀 좌표로 구하는 것이 편리하다. 상대 좌표로부터 픽셀 좌표를 구하는 것도 사실 그리 어렵지는 않다. 어차피 상대좌표라는 것이 폭에 대한 백분율일 뿐이므로 차트 폭에 대해 상대 좌표를 곱한 후 100으로 나누면 된다.

double xstart = chart1.Width * area.AxisX.ValueToPosition(area.AxisX.Minimum) / 100;

double xend = chart1.Width * area.AxisX.ValueToPosition(area.AxisX.Maximum) / 100;

X축의 범위를 구한 후 마우스 커서 좌표가 이 범위안에 있는지 조사한다. 커서 좌표는 폼의 MousePosition으로 구하되 이 값은 화면 좌표여서 PointToClient로 작업 영역 좌표로 바꾸어야 한다.

커서의 수평 좌표가 X축 범위 내에 있으면 그리기를 하되 그렇지 않으면 리턴해 버린다. 차트 바깥에 있을 때는 굳이 그릴 필요가 없고 또 축값을 조사할 때 범위 바깥은 예외가 발생하는 문제도 있다. Y축의 범위도 점검할 수 있지만 아래위로 벗어나는 것은 허용하기로 했다.

X축 대신 에리어의 InnerPlotPosition 속성으로 플롯 영역을 대신 사용해도 될 것 같지만 플롯은 범례까지 포함하기 때문에 안된다. 범위 안에 들어 왔으면 커서 위치에 수직선을 그린다. 에리어의 픽셀 범위를 rtArea에 구하고 이 영역의 수직 영역에 대해 선을 긋는다.

다음은 수직선 옆에 반투명한 색으로 사각형을 그린다. 커서와 너무 밀착하면 답답해 보이므로 10픽셀만큼 거리를 띄우고 사각형이 오른쪽이나 아래로 벗어나면 차트 영역 안으로 좌표를 조정했다. 다음 메서드는 각각 상대 좌표와 픽셀 좌표의 현재 X축값을 조사한다.

double PositionToValue (double position);

double PixelPositionToValue (double position);

마우스 위치의 X축 픽셀 좌표를 x에 구하고 이 위치의 y값은 시리즈에서 순차 검색하여 찾는다. 데이터 포인트 전체를 순회하며 x값보다 최초로 더 큰 XValue를 찾고 그 지점의 y값을 구하면 된다. 이해하기는 쉬운 코드이다.

그러나 데이터가 작을 때는 이런 간단한 방법도 쓸만하지만 X축 값이 수천개 정도 된다면 순차 검색은 너무 느리다. X값이 정렬되어 있으니 이럴 때는 당연히 이분 검색을 사용해야 한다. 직접 이분 검색을 할 필요는 없고 포인트 컬렉션의 FindByValue 메서드를 사용하면 된다.

DataPoint dp = chart1.Series[0].Points.FindByValue(Math.Round(x), "X");

if (dp != null) y = dp.YValues[0];

이 메서드는 주로 Y값을 검색할 때 쓰지만 두 번째 인수로 "X"나 "Y2" 등을 지정하면 다른 값도 찾을 수 있다. 내부적으로 가장 효율적인 검색 방법을 취할 것이다. 정확한 X값만 검색하기 때문에 시리즈에 저장한 값과 같은 포맷으로 맞춰 주어야 한다.

PixelPositionToValue는 소수점 이하 자리까지 계산해 주지만 시리즈에 X는 정수로 들어가 있으니 버림한 후 검색해야 정확하다. 또한 X가 차트 범위를 벗어나면 null이 리턴될 수도 있으므로 에러 처리도 꼭 필요하다.

사실 이 코드는 나도 아주 나중에 알게 되었는데 덕분에 차트의 속도가 굉장히 빨라졌다. 이래서 항상 관심을 가지고 레퍼런스를 틈틈이 뒤져 봐야 한다. 무식한 코드 만들지 말고 잘 만들어 놓은 코드를 적극 활용하자. 이렇게 구한 세 값을 사각 영역안에 출력한다.

커서만 갖다 대면 이 값이 X축의 어디쯤인지, Y값은 얼마인지 축으로 시선을 이동하지 않고도 정확한 값을 알 수 있어 편리하다. 차트를 그릴 때마다 PostPaint 이벤트가 날라오고 원하는 모든 정보를 다 구할 수 있어 얼마든지 예쁜 모양으로 정보를 보여줄 수 있다.

3D 차트

차트를 3D로도 출력할 수 있다. 에리어의 Area3DStyle 객체가 3D 출력 관련 기능을 제공하며 다음과 같은 속성을 가진다.

속성	설명
Enable3D	3차원 출력 기능을 사용한다. 디폴트 값이 false여서 별다른 지정이 없으면 2D로 출력된다. 이 값을 true로 바꾸어야 3D차트가 나타난다.
Inclination	수평축에서의 회전 각도를 지정한다. 디폴트는 위에서 아래로 내려보는 30도로 되어 있다.
Rotation	수직축에서의 회전 각도이다. 디폴트는 오른쪽에서 왼쪽을 바라보는 30도로 되어 있다. 음수 각도이면 벽이 오른쪽으로 이동한다.
Perspective	원근감을 지정한다. 그리드 선이 평행하지 않고 구석의 소실점을 향하는 형식이 된다.
IsRightAngleAxes	isometric projection 기법을 사용한다. 진짜 3D는 아니지만 특정 깊이에서는 가장 자연스럽다. Perspective와는 배타적이다.
WallWidth	벽의 두께를 지정한다.
PointDepth	데이터 포인트의 깊이를 폭에 대한 비율로 지정한다. 100%이면 막대 그래프 윗면이 정사각형이며 그보다 더 깊으면 안쪽으로 길쭉해진다.
PointGapDepth	데이터 포인트간의 간격을 지정한다. 두 개의 막대 그래프를 앞 뒤로 배치했을 때 이 속성에 따라 막대간의 거리가 달라진다.
IsClustered	바, 컬럼 차트가 클러스터 상태인지를 지정한다. 이 값이 true이면 막대를 나란히 배치하고 false이면 앞뒤로 배치한다.

속성의 의미를 읽어 봐도 이 값이 차트의 어떤 면에 영향을 미치는지 직관적으로 파악하기 어렵다. 같이 지정할 수 없는 배타적인 속성도 있고 차트 타입에 따라 효과가 약간씩 달라지기도 한다.

이런 복잡한 속성은 글을 읽어 이해하는 것보다는 실제 값을 바꿔 가며 눈으로 효과를 확인해 보는 것이 이해하기 쉽다. 다음 예제는 이런 목적으로 만든 것이며 키보드로 각 속성을 실행중에 조정해 본다. 소스를 보면 각 키가 어떤 값을 조정하는지, 값의 범위는 어떤지, 디폴트는 무엇인지 알 수 있다.

private void Form1_Load(object sender, EventArgs e)

{

chart1.Series.Add("");

chart1.Series.Add("");

Random R = new Random(100);

double sale = 50;

double cost = 30;

double profit = 10;

for (int i = 0; i < 10; i++)

{

sale += R.Next(-4, 5);

chart1.Series[0].Points.AddY(sale);

cost += R.Next(-4, 5);

chart1.Series[1].Points.AddY(cost);

profit += R.Next(-4, 5);

chart1.Series[2].Points.AddY(profit);

}

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

chart1.Series[0].Color = Color.Blue;

chart1.Series[0].BorderWidth = 2;

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

chart1.Series[1].Color = Color.Red;

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

chart1.Series[2].Color = Color.Green;

chart1.Focus();

}

private void chart1_KeyPress(object sender, KeyPressEventArgs e)

{

ChartArea3DStyle a = chart1.ChartAreas[0].Area3DStyle;

switch (e.KeyChar)

{

case 'q':a.Inclination = Math.Min(a.Inclination + 5, 90); break;

case 'a':a.Inclination = Math.Max(a.Inclination -5, -90); break;

case 'w':a.Rotation = Math.Min(a.Rotation + 5, 180); break;

case 's':a.Rotation = Math.Max(a.Rotation - 5, -180);break;

case 'e': a.Perspective = Math.Min(a.Perspective + 5, 100); break;

case 'd': a.Perspective = Math.Max(a.Perspective - 5, 0); break;

case 'r': a.WallWidth = Math.Min(a.WallWidth + 2, 30); break;

case 'f': a.WallWidth = Math.Max(a.WallWidth - 2, 0); break;

case 't': a.PointDepth = Math.Min(a.PointDepth + 25, 1000); break;

case 'g': a.PointDepth = Math.Max(a.PointDepth - 25, 0); break;

case 'y': a.PointGapDepth = Math.Min(a.PointGapDepth + 25, 1000); break;

case 'h': a.PointGapDepth = Math.Max(a.PointGapDepth - 25, 0); break;

case 'z': a.Enable3D = !a.Enable3D;break;

case 'x':

a.Inclination = 30;

a.Rotation = 30;

a.Perspective = 0;

a.WallWidth = 7;

a.PointDepth = 100;

a.PointGapDepth = 100;

a.IsClustered = false;

a.IsRightAngleAxes = true;

break;

case 'c':a.IsClustered = !a.IsClustered;break;

case 'v':a.IsRightAngleAxes = !a.IsRightAngleAxes;break;

}

Text = String.Format("inc={0},rot={1},per={2},wall={3},dep={4},gap={5}",

a.Inclination, a.Rotation,a.Perspective, a.WallWidth,

a.PointDepth, a.PointGapDepth);

}

두 개의 컬럼 시리즈와 한개의 라인 시리즈를 차트에 표시했다. 키보드 입력을 받으려면 차트에게 포커스를 주어야 하며 KeyPress 이벤트에서 눌러진 키에 따라 속성값을 조정한다. 3D 옵션을 지정하지 않아 처음 실행하면 2D로 출력된다.

이 상태에서 키를 눌러 속성을 조정하며 각 키의 기능은 소스를 보면 알 수 있다. z키가 3D 옵션을 토글하며 x키는 모든 속성을 디폴트로 되돌린다. Z키를 누르면 3D 차트가 나타난다.

하늘에 파란 구름이 떠 있고 땅에 아파트 2동이 줄 지어 서 있다. 이 상태에서 qa, ws키를 눌러 수평, 수직 각도를 틀면 다른 각도에서 바라볼 수 있다. x키를 누르면 언제든지 디폴트 옵션으로 돌아간다.

ed, rf키는 원근감과 벽 두께를 조정한다.

tg는 막대의 두께를 조정하고 yh는 막대간의 거리를 변경한다. 거리를 충분히 띄우면 두 차트가 각각 따로 배치된다.

c키를 눌러 클러스터 상태로 배치하면 두 막대가 앞뒤가 아닌 좌우로 나란히 배열된다. 2D에서는 당연히 나란히 배치할 수밖에 없지만 3D에서는 앞뒤로도 배치할 수 있다.

v키를 눌러 IsRightAngleAxes 옵션을 토글하면 각도가 차트에 영향을 미치는 방식이 달라진다. 각도를 바꿔 가며 차트를 회전시킬 때는 이 옵션을 끄는 것이 더 자연스럽다.

이 예제를 통해 3D 차트의 각 속성이 어떤 영향을 미치는지 연구해 보고 목적에 딱 맞는 옵션을 찾아 적용하면 된다. 말로 설명하는 것보다는 훨씬 더 직관적으로 이해할 수 있고 옵션간의 조합 효과를 테스트하기도 쉽다.

이상으로 차트 컨트롤에 대한 강좌를 마친다. 개발툴에 기본 포함된 컨트롤이라기에는 기능이 다채롭고 안정성이나 성능도 충분히 만족할만한 컨트롤이다. 양이 좀 많지만 충분한 시간을 투자하여 잘 연구해 두워 두면 실무에 유용하게 사용할 수 있다.