차트 꾸미기

범례

범례는 각 시리즈가 어떤 정보인지를 표시하는 설명이다. 차트를 구성하는 컬렉션 중 하나이며 디자이너로 차트를 배치하면 Legend[0] 범례를 기본적으로 생성해 놓고 시리즈의 정보를 자동으로 보여 준다. 다음은 범례 실습을 위한 예제이다.

private void Form1_Load(object sender, EventArgs e)

{

chart1.Series[0].Name = "매출";

chart1.Series.Add("비용");

chart1.Series.Add("순익");

Random R = new Random(100);

double sale = 50;

double cost = 40;

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

{

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

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

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

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

chart1.Series[2].Points.AddY(sale - cost);

}

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

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

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

chart1.Series[0].BorderWidth = 2;

chart1.Series[1].BorderWidth = 2;

chart1.Series[2].BorderWidth = 3;

Legend L = chart1.Legends[0];

}

세 개의 시리즈를 추가하고 각 시리즈에 매출, 비용, 순익으로 이름을 붙였다. 매출과 비용은 난수로 생성하고 순익은 매출에서 비용을 빼 계산한다.

세 개의 시리즈가 차트에 나타나며 각 색상의 그래프가 무엇인지 설명하는 범례가 차트의 오른쪽 위에 표시되어 있다. 범례의 속성을 바꿔 보기 위해 기본 생성된 범례를 L 변수에 대입해 두었다. 범례는 Legend 클래스의 객체이며 속성은 다음과 같다.

속성	설명
Enabled	범례를 보일 것인가 아닌가를 지정한다. 디폴트는 true이며 false로 변경하면 범례를 표시하지 않는다.
Docking	범례를 표시할 변을 지정한다. 디폴트는 오른쪽이며 왼쪽, 위, 아래로 변경할 수 있다.
Alignment	도킹한 면의 어느 방향으로 정렬할 것인가를 지정한다. 디폴트는 Near이며 수평은 왼쪽, 수직은 위쪽이다. Center는 변의 중앙에, Far는 오른쪽이나 아래쪽에 정렬한다.
IsDockedInsideChartArea	도킹 기준이 에리어인지 아니면 전체 차트인지를 지정한다. 디폴트는 false이며 전체 차트 픽처에 도킹된다. 에리어가 여러개일 때만 차이가 발생한다.
DockedToChartArea	에리어 기준으로 도킹할 때 도킹할 에리어의 이름을 지정한다. 디폴트는 빈 문자열이다.
InsideChartArea	범례를 표시하는 에리어의 이름이다.
LegendStyle	항목을 나열하는 방식을 지정한다. Column은 1열 세로로 나열하고 Row는 1행 가로로 나열하고 Table은 임의의 행렬로 도표 형태로 나열한다. 디폴트값은 Table이지만 시리즈가 많지 않으면 1행이나 1열로 보인다.
LegendTableStyle	테이블 형태로 배치할 때 어느 방향을 기준으로 할 것인가를 지정한다. Tall은 가급적 길게 나열하여 좌우에 도킹할 때 적합하며 Wide는 가급적 넓게 나열하여 상하에 도킹할 때 적합하다. 디폴트는 Auto이며 차트가 알아서 결정한다.
BackColor BackSecondaryColor BackGradientStyle BackHatchStyle BackImage BackImageAlignment BackImageTransparentColor BackImageWrapMode	배경 색상, 무늬, 이미지 등을 지정한다. 다양한 방식으로 배경을 채색할 수 있다. 디폴트 배경색은 흰색이다.
BorderColor BorderDashStyle BorderWidth	경계선의 색상, 모양, 굵기를 지정한다. 디폴트가 Empty여서 경계선이 없다.
Font ForeColor	문자열의 글꼴과 색상이다.
IsTextAutoFit	문자열의 크기를 자동으로 조정할 것인가를 지정한다.
TextWrapThreshold	문자열을 자동 개행할 글자수이다. 디폴트는 25이다. 0으로 설정하면 자동 개행하지 않는다.
MaximumAutoSize	범례의 최대 크기를 에리어의 비율로 설정한다. 좌우에 도킹할 때는 폭의 최대값이며 상하에 도킹할 때는 높이의 최대값이다.
Title TitleAlignment TitleForeColor TitleBackColor TitleFont TitleSeparator TitleSeparatorColor	범례의 제목을 지정한다. 디폴트는 None이어서 제목이 없다. 제목 문자열과 글꼴, 색상, 정렬 등을 지정하면 범례 위쪽에 제목이 표시된다. TitleSeparator 속성은 제목 아래에 표시할 구분자이다. 디폴트는 None이어서 구분자가 없지만 Line, DashLine, DotLine, DoubleLine, GradientLine, ThickLine, ThickGradientLine 등의 속성으로 선을 그을 수 있다.
HeaderSeparator HeaderSeparatorColor	범례 헤더의 구분선을 지정한다.
InterlacedRows InterlacedRowsColor	여러 행일 때 교대 배경색을 쓸 것인지를 지정한다.
IsEquallySpacedItems	범례 항목을 균일 간격으로 배치할 것인가를 지정한다. 디폴트는 false이다.
LegendItemOrder	항목을 순서대로 배치할지 아니면 역순으로 배치할지를 지정한다. 디폴트는 Auto이며 이때는 스택드 타입만 역순으로 표시한다.
CellColumns	LegendCellColumn 객체의 컬렉션이다.
CustomItems	시리즈와 상관없이 배치할 수 있는 LegendItem 객체의 컬렉션이다.
ItemColumnSeparator ItemColumnSeparatorColor ItemColumnSpacing	여러 열일 때 열간의 구분자를 지정한다.

속성이 정말 많다. 어느쪽의 어디쯤에 어떤 모양으로 배치할 것인가에 대한 속성부터 알아 보자. 디폴트는 오른쪽에 테이블 형태로 배치하는데 이 속성을 바꿔 보자.

L.Docking = Docking.Bottom;

L.Alignment = StringAlignment.Center;

이 코드에 의해 범례가 아래쪽으로 이동한다. 디폴트 정렬은 왼쪽이지만 Center로 정렬하면 아래 중앙에 표시된다.

오른쪽에 있을 때는 범례내의 시리즈가 세로로 나열되지만 아래쪽으로 내리면 가로로 나열한다. LegendStyle의 디폴트가 Table이고 LegendTableStyle의 디폴트가 Auto여서 모든 것을 자동으로 결정하기 때문이다. 만약 아래쪽에 세로로 나열하고 싶다면 LegendStyle 속성을 Column으로 변경한다.

다음은 범례의 디자인을 바꿔 보자. 디폴트 디자인은 좀 썰렁할 지경이지만 색상과 선모양을 변경하고 제목을 설정하고 그 사이에 구분선을 집어 넣으면 모양이 많이 바뀐다. 다음 코드를 작성한다.

L.BackColor = Color.Silver;

L.BorderColor = Color.Red;

L.BorderWidth = 3;

L.Title = "이달의 실적";

L.TitleBackColor = Color.Yellow;

L.TitleSeparator = LegendSeparatorStyle.DoubleLine;

L.TitleSeparatorColor = Color.Blue;

범례는 컬렉션이므로 필요한만큼 여러 개 배치할 수 있다. Legneds 컬렉션에 새로운 Legend 객체를 추가하고 시리즈의 범례 이름을 변경하면 해당 시리즈의 범례가 변경된다.

chart1.Legends.Add("profit");

chart1.Legends[1].Docking = Docking.Left;

chart1.Series[2].Legend = "profit";

순익을 표시할 범례를 새로 생성하고 왼쪽에 도킹시켰다. 그리고 2번 순익 시리즈의 범례를 profit으로 지정하면 이 시리즈에 대한 설명이 별도의 범례에 따로 표시된다.

시리즈가 아주 많고 그룹별로 나누어 범례를 작성하고 싶다면 얼마든지 많은 범례를 다양한 형태로 작성하여 원하는 곳에 배치할 수 있다.

범례의 항목은 따로 추가하지 않아도 시리즈로부터 자동으로 생성된다. 위 예제의 경우 세 개의 시리즈로부터 이름과 색상 등을 추출하여 범례에 표시한다. 범례의 문자열을 변경하려면 시리즈의 LegendText 속성을 편집한다. 파이나 도넛 같은 차트는 시리즈가 아닌 데이터 포인터의 이름으로 항목을 만든다.

반면 커스텀 항목은 시리즈나 데이터와는 상관없이 사용자가 범례에 항목을 직접 삽입하는 것이다. LegendItem 객체를 생성한 후 CustomItems 컬렉션에 추가하면 이 항목도 범례에 표시된다. 다음 생성자로 커스텀 항목을 만든다.

public LegendItem (string name, System.Drawing.Color color, string image);

항목의 이름을 지정하고 색상이나 이미지 중 하나를 지정한다. 둘 다 지정하면 이미지가 우선이다. 다음 코드는 순익의 텍스트를 원하는대로 변경하고 범례에 문자열 항목 하나를 삽입한다.

chart1.Series[2].LegendText = "오늘의 수익";

LegendItem li = new LegendItem("오늘도 대박일세", Color.Blue, "");

L.CustomItems.Add(li);

순익 시리즈의 이름이 지정한대로 바뀌며 범례 아래쪽에 커스텀 항목도 같이 표시된다.

범례에 꼭 같이 표시하고 싶은 내용이 있으면 커스텀 항목을 이런 식으로 추가한다. 간단한 메모나 정보 등을 표시할 수 있다.

범례를 토글하여 대응 시리즈에 대한 어떤 조작을 가할 수 있다. 여러 가지 동작이 가능하지만 가장 대표적인 예가 시리즈를 잠시 숨기는 것이다. 너무 많은 시리즈가 표시되어 있으면 서로 잘 구분이 되지 않는다.

이럴 때 일부 시리즈를 숨기면 나머지가 잘 보여 시인성이 높아진다. 물론 클릭한 시리즈만 남기고 나머지를 다 숨길 수도 있다. 이 작업을 하려면 클릭한 범례와 대응되는 시리즈를 찾아야 한다. 일단 차트의 MouseClick 이벤트 핸들러를 연결하고 다음 코드를 작성한다.

namespace chartTest

{

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

}

// 시리즈의 색상을 직접 지정한다. 그래야 숨겨도 색상이 변하지 않는다.

Color[] arColor = { Color.Blue, Color.Green, Color.Red };

private void Form1_Load(object sender, EventArgs e)

{

chart1.Series[0].Name = "매출";

chart1.Series.Add("비용");

chart1.Series.Add("순익");

Random R = new Random(100);

double sale = 50;

double cost = 40;

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

{

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

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

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

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

chart1.Series[2].Points.AddY(sale - cost);

}

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

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

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

chart1.Series[0].BorderWidth = 2;

chart1.Series[1].BorderWidth = 2;

chart1.Series[2].BorderWidth = 3;

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

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

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

}

private void chart1_MouseClick(object sender, MouseEventArgs e)

{

// 클릭한 지점의 정보를 조사한다.

HitTestResult hit = chart1.HitTest(e.X, e.Y);

if (hit == null) return;

// 범례 항목을 클릭했고 대응 시리즈가 있을 때

if (hit.ChartElementType == ChartElementType.LegendItem)

{

Series s = hit.Series;

if (s != null)

{

// 이건 안됨. 시리즈를 숨기면 범례도 사라져 다시 클릭할 수 없다.

// s.Enabled = !s.Enabled;

// 투명과 원래색을 토글한다.

if (s.Color == Color.Transparent)

{

int idx = chart1.Series.IndexOf(s.Name);

s.Color = arColor[idx];

}

else

{

s.Color = Color.Transparent;

}

}

}

}

}

}

앞 예제와는 달리 각 시리즈의 색상을 고정해 놓았다. 자동 순환하는 색상을 사용하면 하나를 숨길 때 그 뒤쪽 시리즈의 색상이 변해 일관성이 없다. 그래서 이 기능을 사용하려면 시리즈의 색상을 고정해 두어야 한다.

마우스 클릭 이벤트에서 HitTest 메서드를 호출하여 차트의 어떤 부분을 클릭했는지 알아낸다. 범례를 클릭했고 범례에 대응하는 시리즈가 있으면 이 시리즈가 토글 대상이다.

시리즈를 숨길 때는 통상 Enabled 속성을 사용하지만 이건 안된다. 숨기는건 가능하지만 시리즈와 함께 범례도 숨어 버려 다시 보이게 할 방법이 없다. 그래서 시리즈를 숨겨서는 안되며 투명색으로만 토글한다. 다음은 비용 시리즈만 숨긴 예이다.

여러 개의 시리즈가 복잡하게 포개져 있을 때는 보고 싶은 시리즈만 따로 분리해서 보는 것이 편리하다. 범례 클릭 기능을 활용하면 시리즈에 대한 다양한 동작을 정의하여 사용자와 상호 작용할 수 있다.

차트 꾸미기

지금까지 만들어본 차트의 모양은 검소하고 소박하다. 그러나 각종 꾸미기 기능을 사용하면 얼마든지 자유롭게 꾸밀 수 있다. 차트의 거의 모든 요소에 대해 GDI+의 기능을 다 적용할 수 있다. 그래서 GDI+에 대한 경험이 있으면 쉽고 직관적이다.

선 : 색상, 굵기, 모양, 시작과 끝 모양, 그림자 등

폰트 : 폰트페이스, 크기, 색상, 스타일, 배경색

면 : 단일색, 그레디언트, 반투명 색상, 해치, 이미지, 이미지 반복 모드

차트의 각 요소는 풍부한 그리기 속성을 제공한다. 한 두개만 실습해 보면 나머지 요소도 거의 비슷한 방식으로 꾸밀 수 있다. 다음은 전혀 꾸미지 않은 차트의 예이다.

private void Form1_Load(object sender, EventArgs e)

{

chart1.Series.Add("");

Random R = new Random(100);

double sale = 50;

double cost = 30;

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

{

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

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

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

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

}

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

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

chart1.Titles.Add("꾸미기 Test");

}

라인 차트와 컬럼 차트를 생성하고 타이틀과 범례를 배치했다. 이 투박한 차트를 요란스럽게 꾸며 보자. 다음은 Series의 선과 면에 대한 속성이다.

속성	설명
Color	데이터 포인트를 그릴 선 색상이다.
BorderColor	경계선의 색상이다.
BorderWidth	경계선의 굵기이다.
BorderDashStyle	경계선의 모양이다. Solid가 디폴트이며 Dash, DashDot, DashDotDot, Dot 등이 있다.
BackGradientStyle	배경색의 그래디언트 스타일이다. 디폴트는 None이며 TopBottom, LeftRight, DiagonalLeft, DiagonalRight, HorizontalCenter, VerticalCenter 방향의 채색 옵션이 있다.
BackSecondaryColor	그래디언트를 채색할 두 번째 색상이다.
BackHatchStyle	무늬를 지정한다. 50여종의 무늬가 있다.
BackImage	배경 이미지 파일의 이름이다.
BackImageAlignment	배경 이미지의 정렬을 지정한다.
BackImageTransparentColor	배경 이미지의 투명색이다.
BackImageWrapMode	배경 이미지 반복 모드이다.
ShadowColor	그림자의 색상이다. 반투명하게 깔면 그럴듯해 보인다.
ShadowOffset	그림자의 거리값이다. 디폴트는 0이며 지정한 거리만큼 오른쪽 아래에 그림자가 깔린다. 음수를 주면 왼쪽 위에 그려진다.

GDI+에 다 있는 속성이어서 윈폼을 조금이라도 해 본 사람은 금방 알 수 있다. 이 속성으로 그래프를 채색해 보자. 예쁘게 그리는 것보다는 어떤 속성이 어디에 적용되는지 분명히 알 수 있도록 했다. 사실 디자인 능력이 부족해 어찌 그려도 내가 그린건 촌스럽다.

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

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

chart1.Series[0].BorderWidth = 3;

chart1.Series[0].BorderDashStyle = ChartDashStyle.Dash;

chart1.Series[0].ShadowColor = Color.FromArgb(128, 0, 0, 0);

chart1.Series[0].ShadowOffset = 2;

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

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

chart1.Series[1].BorderWidth = 2;

chart1.Series[1].ShadowColor = Color.FromArgb(128, 0, 0, 0);

chart1.Series[1].ShadowOffset = 2;

색상을 지정하는 속성이 두 가지가 있는데 Color는 선의 색상이고 BorderColor는 면의 색상이다. 라인 차트는 경계선이 없어 BorderColor는 지정해 봐야 쓸 곳이 없음을 알 수 있다.

그러나 굵기와 선모양은 경계선의 속성을 사용하는 점이 비직관적인데 차트 타입이 다양하다 보니 이런 어색함이 발생한다. 그림자를 적당히 깔아 주면 입체적으로 보인다.

다음은 그래디언트 무늬를 채색해 보자. 시리즈에도 무늬를 깔 수 있지만 면적이 좁아 잘 보이지 않는다. 면적을 가진 모든 객체를 그래드언트로 칠할 수 있다. Chart 자체와 ChartArea를 칠해 보자.

chart1.Series[1].BackHatchStyle = ChartHatchStyle.DiagonalBrick;

chart1.BackColor = Color.Gainsboro;

chart1.BackGradientStyle = GradientStyle.TopBottom;

chart1.BackSecondaryColor = Color.White;

chart1.ChartAreas[0].BackColor = Color.Yellow;

chart1.ChartAreas[0].BackGradientStyle = GradientStyle.LeftRight;

chart1.ChartAreas[0].BackSecondaryColor = Color.Orange;

Series[1]의 막대 그래프 안을 벽돌 모양 무늬로 채색했다. 차트 전체는 옅은 회색과 흰색이 위에서 아래로 점점 변하는 그래디언트로 칠하고 차트 에리어는 노란색과 주황색을 좌에서 우로 변하도록 했다.

속성명이 거의 비슷하지만 약간씩 다른 부분이 있는데 배경색 속성이 Series는 Color이지만 차트는 BackColor라는 정도가 다르다. 다음은 폰트를 변경해 보자. 문자열을 표시하는 거의 모든 객체의 글꼴 모양을 지정할 수 있는데 다음 코드는 타이틀의 폰트와 색상, 스타일을 지정한다.

chart1.Titles[0].Font = new Font("궁서", 28);

chart1.Titles[0].ForeColor = Color.Blue;

chart1.Titles[0].TextStyle = TextStyle.Frame;

이 외에도 텍스트의 방향이나 정렬, 그림자 등의 속성이 더 있다. 상상할 수 있는 거의 모든 속성이 다 제공된다고 보면 거의 틀림없다. 타이틀 뿐만 아니라 범례내의 문자열, 축 레이블의 문자열도 폰트를 마음대로 지정할 수 있다.

다음은 차트 컨트롤 자체의 꾸미기 속성이다. Control로부터 받은 일반 속성과 컬렉션 관리 속성이 대부분이고 차트 자체의 장식에 관한 속성은 그리 많지 않다.

속성	설명
AntiAliasing	안티알리아싱을 할 것인가를 지정한다. Text만 하거나 Graphics만 할 수도 있고 All로 선택하면 전부 하고 None은 하지 않는다. 디폴트는 All이며 성능에는 조금 불리하지만 웬만하면 그대로 두는 것이 좋다.
TextAntiAliasingQuality	텍스트에 대한 안티알리아싱 품질을 지정한다. Normal, High, SystemDefault 세 가지가 있다.
IsSoftShadows	그림자 효과를 좀 더 부드럽게 한다. 디폴트는 true이다.
BorderlineColor BorderlineDashStyle BorderlineWidth	차트를 감싸는 외곽선의 속성이다.
BorderSkin	외곽선에 이미지나 그래디언트 등의 더 다양한 속성을 지정할 수 있는 객체이다.
Images	차트에서 사용할 NamedImage 객체의 컬렉션이다. 여기에 이미지를 저장해 두고 차트에서 이름으로 이미지를 사용한다.

다음 코드를 더 추가해 보자.

chart1.AntiAliasing = AntiAliasingStyles.None;

chart1.BorderlineColor = Color.Blue;

chart1.BorderlineWidth = 4;

chart1.BorderlineDashStyle = ChartDashStyle.Solid;

안티알리아싱을 하지 않으면 문자열이나 곡선 부분에 계단이 나타나 보기에 좋지 않다. 차트 전체에 굵은 파란색 외곽선을 둘렀다. 여러 차트를 한꺼번에 사용할 때는 외곽선을 둘러 명확히 구분하는 것이 좋다.

마커와 레이블

다음은 시리즈의 마커 관련 속성이다. 마커는 각 데이터 포인터의 위치를 나타내는 장식이다. Spline처럼 곡선 차트는 포인트 지점이 명확히 보이지 않으므로 마커를 달아 주면 시인성이 향상된다.

속성	설명
MarkerStyle	어떤 마커를 배치할 것인지를 지정한다. 디폴트는 None이며 Circle, Cross, Diamond, Square, Star4, Star5, Star6, Star10, Triangle 등이 있다.
MarkerColor	마커의 색상을 지정한다. 생략시 시리즈의 색상을 따른다.
MarkerSize	마커의 크기를 지정한다.
MarkerStep	마커의 주기를 지정한다. 디폴트는 1이어서 모든 포인트에 표시되지만 2로 지정하면 하나씩 건너뛴다.
MarkerImage	마커로 사용할 이미지 이름이다.
MarkerImageTransparentColor	이미지의 투명 색상이다.
MarkerBorderColor	마커의 경계선 색상이다.
MarkerBorderWidth	마커의 경계선 두께이다.

앞에서 실습한 그리기 속성은 모두 제거하고 다음 코드로 두 시리즈의 마커를 지정해 보자.

chart1.Series[0].MarkerStyle = MarkerStyle.Circle;

chart1.Series[1].MarkerStyle = MarkerStyle.Star5;

chart1.Series[1].MarkerStep = 3;

chart1.Series[1].MarkerSize = 15;

chart1.Series[1].MarkerColor = Color.Lime;

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

chart1.Series[1].MarkerBorderWidth = 2;

라인 시리즈에는 Circle 마커만 배치했다. 밋밋한 선에 비해 강조점이 있어 훨씬 더 보기 좋다. 색상을 지정하지 않으면 시리즈와 같은 색을 사용하는데 약간 더 짙은 색으로 지정하면 더 보기 좋다.

컬럼 시리즈에는 별 마커를 배치하고 여러 가지 속성을 주었다. 3칸마다 마커를 표시하고 크기를 15픽셀로 키웠다. 안쪽은 연두색으로 채색하고 경계선은 두께 2의 빨간색으로 둘렀다. 좀 유치하지만 이런 장식도 가능하다.

그리기 속성은 차트의 객체 계층에 대부분 존재한다. 위쪽 계층에서 지정한 속성은 아래쪽 계층으로 자동 상속되어 일괄 적용된다. Series에는 데이터 포인터의 컬렉션인 Points가 있고 그 안에 DataPoint가 있다. 시리즈에 적용한 속성은 데이터 포인터에도 일괄 적용된다.

만약 하위 계층에서 상위의 그리기 속성을 무시하고 따로 속성을 지정하면 이때는 상위 계층의 속성을 상속받지 않고 직접 지정한 속성이 우선 적용된다. 다음 코드를 추가해 보자.

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

chart1.Series[0].Points[10].MarkerColor = Color.Red;

chart1.Series[0].Points[10].MarkerSize = 10;

chart1.Series[1].Points[3].Color = Color.Blue;

chart1.Series[1].Points[3].MarkerStyle = MarkerStyle.Diamond;

chart1.Series[1].Points[3].MarkerColor = Color.Yellow;

시리즈에 마커 속성을 설정하면 모든 포인트에 일괄 적용된다. 그러나 한 포인트만 특별하게 그리고 싶다면 해당 포인터의 마커 속성만 변경하면 된다. 라인 차트의 마커 색상을 파란색으로 지정하면 모든 포인트의 마커가 파랗지만 10번째 포인트에 대해서만 빨간색의 원 모양으로 지정했다. 나홀로 다른 모양이어서 확실히 강조된다.

컬럼 시리즈도 3번 포인트만 파란색으로 변경하고 노란색의 다이아몬드 마커로 변경했다. 보다시피 지정한 포인트만 원하는 형태로 바꿀 수 있다. 단, 이 경우도 포인트가 지정하지 않은 속성은 상위 계층에서 상속 받는다. 컬럼 시리즈의 3번 포인트는 경계선을 따로 지정하지 않아 시리즈에서 적용한 빨간색 2픽셀이 그대로 적용되었다.

시리즈와 데이터 포인트의 관계 뿐만 아니라 차트에서 계층을 이루는 대부분의 객체가 이 규칙을 따른다. 항상 상위 객체의 속성이 하위로 일괄 전파되어 통일된 모양을 쉽게 만들 수 있다. 특별히 튀고 싶은 녀석만 속성을 원하는대로 따로 지정하면 된다.

레이블은 차트 곳곳에 표시되는 문자열인데 시리즈의 Label 관련 속성은 데이터 포인트 근처에 표시하는 텍스트를 지정한다. 속성은 다음과 같다.

속성	설명
Label	레이블에 표시할 문자열이다. 상수 문자열을 쓸 수도 있고 키워드를 쓸 수도 있다.
LabelForeColor	레이블의 문자열 색상이다.
LabelBackColor	레이블 문자열의 배경색이다.
LabelBorderColor LabelBorderWidth LabelBorderDashStyle	레이블의 경계선이다.
LabelFormat	레이블의 출력 포맷을 지정한다.
LabelAngle	레이블의 각도이다. -90 ~ 90까지 지정한다.

레이블에 문자열 상수를 표시할 수도 있지만 모든 데이터 포인트에 굳이 같은 문자열을 표시할 이유는 없다. 주로 키워드를 사용하여 특정값을 가져오는 식을 기술한다. 키워드 종류는 다음과 같다. 레이블 뿐만 아니라 툴팁, 축, 범례 등 텍스트를 표시하는 여로 곳에 공통적으로 사용한다.

키워드	설명
#VALX	X축의 값이다.
#VAL	Y축의 값이다. 여러 개의 Y값을 가진 시리즈는 #VALY, #VALY2, #VALY3, #VALY4 등으로 이름을 붙인다.
#SERIESNAME	시리즈의 이름이다.
#LABEL	데이터 포인트의 레이블이다.
#AXISLABEL	축의 레이블이다.
#INDEX	데이터 포인터의 순서값이다.
#PERCENT	Y값의 퍼센트 비율이다.
#TOTAL, #AVG, #MIN, #MAX	Y값의 총합, 평균, 최소, 최대값이다.
#FIRST, #LAST	첫 Y값, 마지막 Y값이다.

다음 예제로 데이터 포인트 위에 레이블을 표시해 보자.

private void Form1_Load(object sender, EventArgs e)

{

chart1.Legends[0].Enabled = false;

Random R = new Random(100);

double value = 30;

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

{

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

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

}

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

chart1.Series[0].Label = "#VALX:#VAL";

chart1.Series[0].LabelForeColor = Color.Red;

chart1.Series[0].LabelBackColor = Color.Yellow;

chart1.Series[0].LabelBorderColor = Color.Black;

chart1.Series[0].LabelAngle = -90;

}

노란색 사각형안에 X축의 값과 Y축의 값이 같이 표시된다. 축으로 시선이 이동하지 않아도 레이블만으로 값을 알아볼 수 있어 편리하다. 키워드를 바꾸면 전체에 대한 비율이나 평균, 총합 등을 레이블에 표시할 수 있다.

툴팁

툴팁은 마우스 커서를 올린 채로 잠시 머무르면 나타나는 작은 사각 영역이다. 차트의 곳곳에 툴팁을 표시할 수 있다. 단순한 안내 문자열을 표시할 수도 있지만 주로 키워드를 지정하여 해당 위치의 특정값을 조사하여 표시한다.

대상이 어디건 속성 이름은 모두 ToolTip이며 문자열 형식이다. 앞 예제에 범례를 표시하고 시리즈와 범례, 양축에 툴팁을 지정해 보자.

private void Form1_Load(object sender, EventArgs e)

{

Random R = new Random(100);

double value = 30;

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

{

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

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

}

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

chart1.Series[0].Label = "#VALX:#VAL";

chart1.Series[0].LabelForeColor = Color.Red;

chart1.Series[0].LabelBackColor = Color.Yellow;

chart1.Series[0].LabelBorderColor = Color.Black;

chart1.Series[0].LabelAngle = -90;

chart1.Series[0].ToolTip = "#VAL";

chart1.Series[0].LegendToolTip = "총 매출 : #TOTAL";

chart1.Series[0].LabelToolTip = "#PERCENT";

chart1.ChartAreas[0].AxisX.ToolTip = "X축 툴팁";

chart1.ChartAreas[0].AxisY.ToolTip = "Y축 툴팁";

}

시리즈의 각 부분과 X, Y 축에도 툴팁을 지정했다. 마우스 커서를 여기 저기 움직여 보면 툴팁이 나타난다.

레이블에는 Y축 값이 표시되어 있고 툴팁에는 이 값의 비율을 표시한다. 자주 보는 정보는 드러나게 해 두고 가끔 참고하는 정보는 툴팁에 넣어 두면 어울린다.

커스텀 속성

차트를 꾸미는 속성이 충분히 많지만 현실의 요구는 이보다 훨씬 더 다양하고 특수해서 더 예쁘게 꾸미고 싶어한다. 그래서 더 복잡한 꾸미기 기능을 CustomProperties 속성으로 제공한다. 다음 예제를 보자.

private void Form1_Load(object sender, EventArgs e)

{

chart1.Series.Add("");

chart1.Series.Add("");

chart1.Series.Add("");

Random R = new Random(100);

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

{

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

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

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

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

}

}

컬럼 차트 4개를 그렸는데 색색깔로 채색되어 있지만 다 막대 모양이라 뭔가 밋밋하다. 좀 더 예쁘고 입체적인 모양을 그리고 싶다면 DrawingStyle 속성을 지정한다. 다음 코드를 추가해 보자.

chart1.Series[0].CustomProperties = "DrawingStyle=Cylinder";

chart1.Series[1].CustomProperties = "DrawingStyle=Emboss";

chart1.Series[2].CustomProperties = "DrawingStyle=Wedge";

chart1.Series[3].CustomProperties = "DrawingStyle=LightToDark";

각 DrawingStyle별로 입체적인 모양이 그려진다. CustomProperties 속성은 문자열 형태로 A=B 식으로 추가 속성을 지정한다. 여러 개의 속성을 콤마로 구분하여 지정할 수 있으며 속성의 이름은 대소문자를 구분한다.

시리즈의 인덱서로도 커스텀 속성을 지정할 수 있다. [ ] 괄호안에 속성의 이름을 쓰고 속성값을 대입하면 된다. 이 방식은 커스텀 속성을 하나씩 따로 대입할 수 있어 편리하다.

chart1.Series[0]["DrawingStyle"] = "Cylinder";

DrawingStyle을 시리즈의 속성을 정의하지 않고 문자열 형태의 커스텀 속성으로 정의하는 이유는 무엇일까? Series 클래스의 멤버로 선언해 두면 다음과 같이 더 편리하고 오타 발생의 위험도 없다.

chart1.Series[0].DrawingStyle = DrawingStyle.Cylinder;

이렇게 하지 않은 이유는 커스텀 속성은 차트 타입별로 적용 여부가 다르기 때문이다. DrawingStyle은 면을 장식하는 속성이므로 Line, Spline 등의 타입에는 아무짝에도 쓸모가 없다. 35개나 되는 차트 타입별로 필요한 속성을 다 멤버로 정의하다가는 Series 클래스가 너무 거대해지고 무거워진다.

그래서 차트 타입별로 적용되는 속성을 커스텀 속성으로 정의해 두고 필요할 때만 문자열안에 A=B 식으로 정의하도록 되어 있다. 앞에서도 이런 예를 본 적이 있는데 캔들 차트의 커스텀 속성을 다음과 같이 정의했었다.

"PriceDownColor=Blue, PriceUpColor=Red"

캔들 차트는 주로 주식 시세를 그릴 때 사용하는데 주가가 올라갈 때와 내려갈 때의 색상이 다르며 각각 PriceDownColor, PriceUpColor 커스텀 속성으로 정의한다. 이 속성은 캔들 차트에만 필요하며 다른 차트에는 쓸 일이 없기 때문에 커스텀 속성이다.

커스텀 속성은 총 80개 있으며 앞으로 더 늘어날 수도 있다. 차트 타입별로 다르기 때문에 각 타입을 연구할 때 같이 살펴 보는 것이 좋다. 레퍼런스에 속성의 의미와 적용되는 차트 타입이 잘 정리되어 있으니 시간 날 때마다 어떤 속성이 더 있는지 구경해 보자.