이번 글부터는 실질적인 그래프를 살펴보도록 하겠습니다. 그 첫 번째는 선형 그래프와 영역 그래프입니다. 선형 그래프는 그 사용법이 굉장히 단순하기 때문에 처음 보면서 이해하는데 큰 무리가 없을 것으로 생각 됩니다. 그 외에 차트의 격자무늬나 바탕을 꾸미는 부분도 조금씩 살펴보겠습니다.
우선 간단한 선형 그래프를 그려보겠습니다. Chart 컨트롤을 ASPX페이지 영역에 드래그해서 올려놓고 코드를 다음처럼 변경해 줍니다.
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="Chart1" runat="server">
<series>
<asp:Series ChartType="Line" BorderWidth="3" Name="Series1"></asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</chartareas>
</asp:Chart>
</div>
</form>
</body>
그리고 .cs 코드의 Page_Load 메서드를 다음처럼 코딩해 줍니다.
protected void Page_Load(object sender, EventArgs e)
{
int[] yValues = new int[20];
Random rand = new Random();
for (int i = 0; i < 20; i++)
{
yValues[i] = rand.Next(1000);
}
Chart1.Series[0].Points.DataBindY(yValues);
}
이에 의한 결과는 다음과 같습니다.
코드를 보고 결과를 보면 흠 이렇게 되는 거군 이라고 이해하는데 별다른 문제가 없을 정도로 단순한 코드입니다. 지금까지의 글을 잘 따라오셨다면 이미 아실 만한 부분이지만 다시 한번 언급 하자면, Chart 컨트롤에서 그래프의 형태는 Series의 ChartType애트리뷰트나 .cs코드에서 지정하는 Series 객체의 ChartType 속성으로 지정이 가능합니다. 여기에서는 태그의 애트리뷰트 형태로 ChartType="Line"을 지정해 주고 있습니다. .cs코드에서 Series를 동적으로 생성하는 부분을 살펴볼 때 ChartType을 프로그래밍적으로 할당하는 법에 대해서도 살펴보겠습니다.
위의 결과가 말은 선형 그래프라고 하지만 이런 거 가지고 우왕~ 그래프에요 멋지죠? 라고 하면 바로 퇴사의 지름길 이겠죠? 하나하나 그래프의 모습을 다듬어 보겠습니다. 다음처럼 HTML 코드를 수정합니다.
<asp:Chart ID="Chart1" runat="server">
<series>
<asp:Series ChartType="Line" BorderWidth="2" Color="DodgerBlue"
ShadowColor="20, 20, 20" ShadowOffset="1" Name="Series1"></asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" BackColor="WhiteSmoke">
<axisy LineColor="220, 255, 0, 0">
<MajorGrid LineColor="220, 0, 255, 0" />
</axisy>
<axisx LineColor="220, 0, 0, 255">
<MajorGrid LineColor="220, 255, 255, 0" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
수정한 HTML 코드에서는 BorderWidth 애트리뷰트를 통해서 그려지는 선의 굵기를 지정해 주었습니다. Color 애트리뷰트는 그려지는 선의 색상입니다. 내년 찬호형님의 화이팅을 바라면서 색은 '다져블루'로 정해봤습니다. 하지만 현실은 필라델피아죠. 훗.... ShadowColor는 선에 주어지는 그림자 효과의 색상을 지정합니다. ShadowOffSet은 그림자가 얼마나 떨어져 있는지 정해주는 값이구요. 이부분을 센스있게 지정해 준다면 선이 마치 입체처럼 보여지는 효과를 줄 수 있습니다. 마지막으로 주어지는 Name은 해당 시리즈의 이름으로 서버 컨트롤의 ID처럼 사용됩니다. 여러 Series를 사용할때 해당 시리즈에는 Chart1.Series[0] 처럼 숫자 인덱스로도 Chart1.Series["Series1"] 처럼 문자 기반으로도 접근이 가능합니다. 이 역시 여러 개의 Series를 사용하는 예제에서 살펴보겠습니다.
변경된 ChartArea에서는 차트의 뒷부분의 모양을 재정의하고 있습니다. 우선 BackColor로 배경색을 'WhiteSmoke'로 잡아 주었습니다. 그리고 그리드의 선을 구성하는 4가지 요소를 각각 빨간색, 파란색, 녹색, 노란색으로 지정해 주었습니다. 실제 그래프를 그릴 때에는 이런 총 천연의 유치한 색상배열을 하지 않겠지만 그리드의 선을 지정 할때 어떤 녀석이 어떤 걸 매핑하는지 쉽게 알 수 있게 하려는 꼼수입니다. .cs코드는 전혀 변경되지 않았습니다. 이 코드 변경에 대한 결과는 다음과 같습니다.
방금 전보다 훨씬 더 안타까운 그래프가 되었습니다. 안구에 밀려오는 쓰나미를 이겨내고 그리드가 어떤 부분인지 확인해 봅시다. Y축의 선은 빨간색으로 지정했습니다. 확인되시죠? Y축의 Major 그리드는 선은 녹색입니다. X축의 선은 파란색입니다. X축의 Major 그리드 선은 노란색입니다. 이쯤이면 그리드의 색을 지정 할때 어떤 형태로 색이 나올지 느낌이 오셨으리라 생각합니다. 그럼 다음 코드를 살펴보죠. 다음처럼 HTML 코드를 변경합니다.
<asp:Chart ID="Chart1" Width="600" Height="300" runat="server">
<series>
<asp:Series ChartType="Line" BorderWidth="2" BorderDashStyle="Dot" Color="DodgerBlue"
ShadowColor="20, 20, 20" ShadowOffset="1" Name="Series1"></asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" BackGradientStyle="LeftRight"
BackSecondaryColor="240, 240, 240" BackColor="255, 255, 255">
<axisy LineColor="64, 64, 64">
<MajorGrid LineColor="180, 180, 180" Interval="100" />
<LabelStyle ForeColor="Gray" Font="맑은 고딕, style=Bold" />
</axisy>
<axisx LineColor="64, 64, 64" Interval="2">
<MajorGrid LineColor="180, 180, 180" />
<LabelStyle ForeColor="DimGray" Font="굴림, style=Bold" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
이전 코드와 동일하게 .cs 코드는 변경하지 않았습니다. 변경에 의한 결과는 다음과 같습니다.
이제 좀 안정감(?) 있는 그래프가 되었나요? 역시 그리드의 색 지정은 무채색이 왕입니다. 변경된 부분을 볼까요? BorderDashStyle값을 'Dot'으로 주어 선형 그래프를 점선으로 표현하도록 바꾸었습니다. 이 부분을 'DashDot'이니 'Dash'니 하는 값으로 변경하여 그리는 선의 형태를 조정할 수 있습니다. 그리고 ChartArea에서는 BackGradientStyle의 값을 'LeftRight'로 지정해 왼쪽에서 오른쪽으로 그라디언트 효과를 주는 배경을 만들어 두었습니다. 그라디언트 효과는 데이터의 흐름을 보여줄 수 있는 한 방법이기 때문에 연한 색에서 진한 색으로 깔아주는 것도 좋은 방법이겠네요. 그라디언트에 참여하는 색은 BackColor와 BackSecondaryColor를 이용하여 지정합니다. 그리고 그리드의 색상은 차분하게 바꿔 주었습니다. 또 하나 바뀐 부분은 X축과 Y축에 표시되는 폰트의 지정입니다. 각 축의 폰트들을 다른 폰트형태와 다른 색상으로 지정해 두었으므로 X축과 Y축에 대한 혼동은 없으시리라 생각합니다. 이런 식으로 세분화되어 나누어져 있기 때문에 이러한 애트리뷰트를 잘 이용한다면 세밀한 부분까지 그래프의 커스터마이징이 가능합니다.
또 하나 살펴볼 부분은 MajorGrid에 추가해 준 Interval 애트리뷰트입니다. X축과 Y축의 Interval을 조정해 줌으로서 그리드가 얼마 만에 한번씩 표시해 줄 것인지 결정하게 됩니다. Interval 값을 지정해 주지 않으면 컨트롤에서 적당한 값으로 Interval을 조정하므로 대부분의 경우에 Interval의 값은 적정한 값으로 정해주어야 할 필요가 있습니다.
이번에는 드디어 두 개의 Series를 사용해보고 Spline이라는 형태도 살펴보겠습니다. 다음처럼 HTML 코드를 변경합니다.
<asp:Chart ID="Chart1" Width="600" Height="300" runat="server" ImageType="Png">
<series>
<asp:Series ChartType="Line" MarkerStyle="Square" BorderWidth="2"
Color="DodgerBlue" ShadowColor="20, 20, 20" ShadowOffset="1" Name="Series1" />
<asp:Series ChartType="Spline" MarkerStyle="Circle" IsValueShownAsLabel="true"
BorderWidth="2" Color="Tomato" ShadowColor="20, 20, 20" ShadowOffset="1"
Name="Series2" />
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" BackGradientStyle="LeftRight"
BackSecondaryColor="240, 240, 240" BackColor="255, 255, 255">
<axisy LineColor="64, 64, 64">
<MajorGrid LineColor="180, 180, 180" Interval="100" />
<LabelStyle ForeColor="Gray" Font="맑은 고딕, style=Bold" />
</axisy>
<axisx LineColor="64, 64, 64" Interval="2">
<MajorGrid LineColor="180, 180, 180" />
<LabelStyle ForeColor="DimGray" Font="굴림, style=Bold" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
그리고 .cs 코드를 다음처럼 변경합니다.
protected void Page_Load(object sender, EventArgs e)
{
int[] yValues1 = new int[20];
int[] yValues2 = new int[20];
Random rand = new Random();
for (int i = 0; i < 20; i++)
{
yValues1[i] = rand.Next(1000);
yValues2[i] = rand.Next(1000);
}
Chart1.Series[0].Points.DataBindY(yValues1);
Chart1.Series[1].Points.DataBindY(yValues2);
}
이에 의한 결과는 다음과 같습니다.
좀 어지럽긴 하지만 이제 슬슬 쓸만한(?)형태를 갖추어 듯 하군요. 두 개의 Series를 사용하기 위해서 ChartType이 'Spline'인 새로운 Series를 추가 하였습니다. 색상은 '다져블루'와 대비되도록 '토마토'색으로 주었습니다. Spline은 선형 그래프와 성질은 비슷하지만 선형 그래프처럼 각 점을 직선으로 잇는 게 아닌 곡선으로 부드럽게 이어주는 그래프입니다. 새로 추가한 Series의 마지막에 겹쳐지지 않도록 Name값을 Series2로 준 부분도 확인하시기 바랍니다. 또 하나 Series 부분에서 추가된 부분은 MarkerStyle입니다. MarkerStyle은 원래 표시되어야 할 Point에 네모나 원형으로 점을 찍어주는 역할을 합니다. 경우에 따라서는 세 점을 잇는 직선인데 기울기가 똑같아서 마치 두 점을 잇는 점처럼 보이는 경우에 명백하게 여기는 세 점을 잇는 부분입니다. 라고 말해주는 기능을 합니다. 덤으로 조금은 밋밋해 보일 수 있는 선형 그래프나 Spline 그래프에 포인트를 주는 역할도 하기 때문에 제 경우에는 매우 복잡한 그래프가 아니라면 섞어서 사용해주는 편입니다. 그리고 새로 추가한 Series에는 IsValueShownAsLabel 애트리뷰트도 추가해 주었습니다. 이 애트리뷰트의 값을 true로 지정하면 해당 Series의 각 Point에는 해당하는 Y값이 점 위로 출력됩니다. 필요한 경우 해당 위치의 값이 정확히 어떤 값을 가지는지 알아야 하는 경우도 있으므로 필요할 때 사용해 주면 됩니다.
다음으로는 3차원 형태의 그래프에 대해서 살펴보겠습니다. HTML 코드를 다음처럼 변경해 줍니다.
<asp:Chart ID="Chart1" Width="600" Height="300" runat="server" ImageType="Png">
<series>
<asp:Series ChartType="Line" MarkerStyle="Square" BorderWidth="2"
Color="DodgerBlue" ShadowColor="20, 20, 20" ShadowOffset="1"
Name="Series1" />
<asp:Series ChartType="Spline" MarkerStyle="Circle" IsValueShownAsLabel="true"
BorderWidth="2" Color="Tomato" ShadowColor="20, 20, 20" ShadowOffset="1"
Name="Series2" />
</series>
<chartareas>
<asp:ChartArea Area3DStyle-Enable3D="true" Area3DStyle-Rotation="40"
Area3DStyle-Inclination="30" Name="ChartArea1" BackGradientStyle="LeftRight"
BackSecondaryColor="240, 240, 240" BackColor="255, 255, 255">
<axisy LineColor="64, 64, 64">
<MajorGrid LineColor="180, 180, 180" Interval="100" />
<LabelStyle ForeColor="Gray" Font="맑은 고딕, style=Bold" />
</axisy>
<axisx LineColor="64, 64, 64" Interval="2">
<MajorGrid LineColor="180, 180, 180" />
<LabelStyle ForeColor="DimGray" Font="굴림, style=Bold" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
.cs 코드는 변경하지 않았습니다. 결과로 출력되는 그래프는 다음과 같습니다.
보기에는 그리 좋지 않군요... ChartArea의 3차원 관련 값을 조정해 줌으로서 선형 그래프와 Spline 그래프의 입체적인 모습을 확인 할 수 있습니다. 여기에서는 '다져블루'나 'Tomato'같은 불투명색을 지정해 주고 있기 때문에 그다지 멋진 형태의 그래프가 나오지 않았지만 알파값을 지정해 주면 생각보다 꽤 멋진 모습이 나옵니다. 알파값을 지정한 그래프는 잠시 후에 살펴보겠습니다. 3차원 형태는 ChartArea의 Area3DStyle로 시작하는 애트리뷰트를 통해서 그 모습을 지정해 줍니다. Area3DStyle-Enable3D의 값을 true로 하면 2차원 형태의 그래프를 3차원 형태로 보여줍니다. 그리고 Area3DStyle-Rotation과 Area3DStyle-Inclination의 값을 통해서 양 옆쪽과 위아래 방향의 회전을 지정해 줍니다. 이 두 값을 다양하게 변경해 보면서 그래프가 어떠한 모습을 가지는지 체크해 보시기 바랍니다.
다음으로는 3차원 형태의 영역그래프를 살펴보겠습니다. 선형 그래프와 영역 그래프(Area)는 그렇게 큰 차이가 나지 않습니다. 선형 그래프에서 아래쪽을 선을 그리는 색으로 쭈욱 칠해주면 바로 영역 그래프가 되기 때문입니다. 같은 의미로 Spline 그래프의 영역 그래프 형태인 SplineArea역시 같은 느낌으로 사용됩니다. 이번에는 알파값을 지정해 그래프를 그려보겠습니다. 결과를 확인해 보시면 느낌이 오겠지만 대부분의 경우에 3차원 그래프를 사용할때는 알파값을 주는 색을 지정해야 멋진 모습의 그래프가 출력됩니다. 다음처럼 HTML 코드를 변경하겠습니다.
<asp:Chart ID="Chart1" Width="600" Height="300" runat="server" ImageType="Png">
<series>
<asp:Series ChartType="SplineArea" Name="Series1"></asp:Series>
<asp:Series ChartType="Area" Name="Series2"></asp:Series>
</series>
<chartareas>
<asp:ChartArea Area3DStyle-Enable3D="true" Area3DStyle-Rotation="30"
Area3DStyle-Inclination="20" Area3DStyle-WallWidth="1" Area3DStyle-Perspective="5"
Name="ChartArea1" BackGradientStyle="LeftRight" BackSecondaryColor="240, 240, 240"
BackColor="255, 255, 255">
<axisy LineColor="64, 64, 64">
<MajorGrid LineColor="180, 180, 180" Interval="100" />
<LabelStyle ForeColor="Gray" Font="맑은 고딕, style=Bold" />
</axisy>
<axisx LineColor="64, 64, 64" Interval="2">
<MajorGrid LineColor="180, 180, 180" />
<LabelStyle ForeColor="DimGray" Font="굴림, style=Bold" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
그리고 .cs 코드를 다음처럼 변경합니다.
protected void Page_Load(object sender, EventArgs e)
{
int[] yValues1 = new int[20];
int[] yValues2 = new int[20];
Random rand = new Random();
for (int i = 0; i < 20; i++)
{
yValues1[i] = rand.Next(1000);
yValues2[i] = rand.Next(1000) / 2;
}
Chart1.Series["Series1"].Color = Color.FromArgb(220, Color.DodgerBlue);
Chart1.Series["Series2"].Color = Color.FromArgb(220, Color.Tomato);
Chart1.Series["Series1"].Points.DataBindY(yValues1);
Chart1.Series["Series2"].Points.DataBindY(yValues2);
Chart1.ChartAreas["ChartArea1"].Area3DStyle.LightStyle = LightStyle.Realistic;
}
이에 의한 출력 결과는 다음과 같습니다.
앞에서 말한 것 처럼 그래프의 형태를 SplineArea와 Area로 변경했습니다. 그리고 '다져블루'와 '토마토'의 알파값 지정을 위해서 색 지정을 프로그래밍 방식으로 변경했습니다. 그 결과 이전에 비해서 Series 부분의 태그는 많이 간소해졌네요.
ChartArea 부분에도 약간 변경 점이 있습니다. 우선 Area3DStyle-WallWidth의 값을 1로 지정해 그래프 뒷 쪽에 표시되던 회색부분을 1픽셀로 줄였습니다. 이전의 그래프와 비교해보시면 차이를 느끼실 수 있을 것으로 생각합니다. 그리고 원근감을 조절해 주는 Area3DStyle-Perspective 값을 5로 지정해 주었습니다. 이번 그래프를 보시면 이전 그래프에 비해서 아래쪽 보다 위쪽이 넓게 표현되는 것을 확인할 수 있습니다. Area3DStyle-Perspective 값은 그 값을 크게 할 수록 위쪽을 넓게 표시해 줌으로서 위쪽에서 볼 때 원근감이 느껴지도록 그래프를 변형해 그려줍니다.
.cs 코드를 살펴볼까요? 우선 앞쪽의 그래프가 뒷 쪽의 그래프를 가리면 전체 형태를 잘 보기 힘들기 때문에 난수로 생성되는 값을 1/2로 줄여주었습니다. 그러고 보니 rand.Next(500) 이면 될 것을 뻘 짓을 한 느낌이 드네요.... 그 다음으로 '다져블루'와 '토마토'에 220의 알파값을 주어 각 Series의 색상으로 지정해 주었습니다. 그리고 마지막으로 LightStyle의 값을 Realistic으로 지정해 주었습니다. LightStyle을 Realistic으로 지정하면 3차원 형태의 그래프에서 회전할 때 그에 맞게 hue,saturation의(모르시는 분은 포토샵을 참고합시다.) hue값을 조정해 준다고, 문서에 적혀 있습니다. 막눈인 저로서는 이 값의 변경에 의한 그래프 변동을 파악하기 힘드네요. 하지만 설명에 따르면 Realistic으로 지정해 주면 좀 더 부드러운 그래프를 확인 할 수 있을 것으로 보입니다.
이것으로 몇 가지 예를 살펴보면서 선형 그래프와 영역 그래프에 대해서 살펴보았습니다. Series를 확장해 주고 색 지정을 적절하게 해준다면 이정도 정보만으로도 실제 쓸만한 그래프를 그릴 수 있을 것으로 생각합니다. 영역 그래프 같은 경우에는 3차원 형태도 꽤나 멋있는 모습을 보여주기도 하구요. 덤으로 차트의 뒷쪽 그리드를 다듬는 방법에 대해서도 살펴보았습니다. 이정도면 선형 그래프를 자신의 사이트에 적용하고 싶은 마음이 막막 드시지 않나요?
저는 색맹(?)이라 정말 구리구리한 색감으로 선택을 했지만 능력자분들이라면 여기에서 살펴본 예보다 더 멋진 모습의 차트로 꾸미실 수 있을 것으로 생각합니다. 그리고 인텔리센스의 힘을 빌어 위에서 살펴본 여러가지 애트리뷰트와 속성 값을 여러 형태로 변형해 보시기 바랍니다. 그러면서 자신의 내공이 조금씩 쌓여 갈 테니 까요.
그럼 다음에는 막대형태의 차트를 살펴보도록 하겠습니다. 그럼 열공 하세요!
:{3} 
({4})