차트 꾸미기

지금까지 만들어본 차트의 모양은 검소하고 소박하다. 그러나 각종 꾸미기 기능을 사용하면 얼마든지 자유롭게 꾸밀 수 있다. 차트의 거의 모든 요소에 대해 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;

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