어느새 네 번째 글입니다. 세 번째 글에서 선형 차트에 대해서 알아 봄으로서 실질적인 그래프를 그리는 방법에 대해서 어느 정도 감을 잡으셨으리라 생각합니다. 사실 Chart 컨트롤은 기본적인 구조는 그대로인 상태에서 여러 형태로 파생하는 형식의 컨트롤이기 때문에 기본적인 지식만 있다면 그 다음부터는 별다른 설명 없이도 문서를 참고하면 개발이 가능한 컨트롤입니다. 하지만 처음 겪어보는 부분들에 대한 막막함을 잘 알고 있기 때문에 다소 쓸데없어 보이는 정도까지 천천히 진행해 보도록 하겠습니다.
이번에 살펴볼 형태는 막대 차트입니다. 막대 차트는 Chart 컨트롤의 ChartType 속성을 Column이나 Bar로 지정하여 만들 수 있습니다. 막대를 수직 방향으로 보여주는 형태가 Column이고 수평방향으로 보여주는 형태가 Bar입니다. 사실 Column 차트를 90도로 돌린 형태가 Bar이기 때문에 Column이나 Bar 둘 중 하나만 제대로 쓸 수 있다면 다른 쪽은 그냥 ChartType만 바꾼 것으로 개발이 끝납니다. 우선은 Column 형태에 대해서 자세하게 알아보고 마지막 부분에 간단하게 Bar 형태에 대해서 알아보겠습니다. 그럼 막대 차트에 대해서 살펴볼까요?
첫번째로 살펴볼 HTML 코드는 다음과 같습니다.
<asp:Chart ID="Chart1" runat="server">
<series>
<asp:Series ChartType="Column" Color="DodgerBlue" BorderColor="Black"
Name="Series1"></asp:Series>
<asp:Series ChartType="Column" Color="Tomato" BorderColor="Black"
Name="Series2"></asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64"
BackSecondaryColor="Transparent" BackColor="Transparent"
ShadowColor="Transparent" BorderWidth="0">
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
그리고 .cs 코드는 다음과 같습니다.
protected void Page_Load(object sender, EventArgs e)
{
Random rand = new Random();
for (int i = 0; i < 10; i++)
{
Chart1.Series["Series1"].Points.AddY(rand.Next(100));
Chart1.Series["Series2"].Points.AddY(rand.Next(40));
}
}
코드에 의한 결과는 다음과 같습니다.
크게 특별할 부분이 없는 심플한 코드입니다. 그 구조도 선형 그래프에서 짚어 보았던 부분과 크게 다른 부분이 없기 때문에 무리 없이 이해 하시시리라 생각합니다. 이번 코드에서 꾸밈이 들어간 부분은 BorderColor로 검정색을 주어 막대의 외각 부분을 검은색으로 그린 부분 밖에 없습니다. 그럼 좀 더 꾸며 보도록 하겠습니다.
HTML 코드에는 변경없이 .cs 코드만 다음처럼 변경합니다.
protected void Page_Load(object sender, EventArgs e)
{
Chart1.Series["Series1"]["DrawingStyle"] = "Cylinder";
Chart1.Series["Series2"]["DrawingStyle"] = "Cylinder";
Random rand = new Random();
for (int i = 0; i < 10; i++)
{
Chart1.Series["Series1"].Points.AddY(rand.Next(100));
Chart1.Series["Series2"].Points.AddY(rand.Next(40));
}
}
코드에 의한 결과는 다음과 같습니다.
별다른 코드의 변동 없이 .cs 코드에서 Series의 'DrawingStyle'값을 'Cylinder'로 주어진 것만으로도 자연스러운 원통 형태의 그라데이션이 입혀졌습니다. 막대 차트는 DrawingStyle에 'Cylinder'(원통형), 'Emboss'(볼록 튀어나온 효과), 'LightToDark'(안쪽에서 바깥쪽으로 음영을 주는 효과), 'Wedge'(앞이 뾰쪽하게 나온 모양), 'Default'(기본 막대형태)로 꾸밈이 가능합니다. DrawingStyle은 2차원 형태 뿐만 아니라 3차원 형태에서도 동일하게 적용되기 때문에 지금 만들어 본 그래프와 잠시 후 다룰 3차원 그래프에서도 DrawingStyle의 값을 모두 바꾸어 보면서 그 형태를 확인해 두시기 바랍니다.
다음으로는 3차원 형태의 그래프를 살펴보겠습니다. HTML 코드를 다음처럼 변경합니다.
<asp:Chart ID="Chart1" Width="600" Height="300" runat="server">
<series>
<asp:Series ChartType="Column" Name="Series1"></asp:Series>
<asp:Series ChartType="Column" Name="Series2"></asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="true"
Area3DStyle-Rotation="30" Area3DStyle-Inclination="30"
BorderColor="64, 64, 64, 64" BackColor="whitesmoke" BorderWidth="0">
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
.cs코드는 다음과 같습니다.
protected void Page_Load(object sender, EventArgs e)
{
Chart1.Series[0].Color = Color.FromArgb(240, Color.DodgerBlue);
Chart1.Series[1].Color = Color.FromArgb(240, Color.Tomato);
Random rand = new Random();
for (int i = 0; i < 5; i++)
{
Chart1.Series["Series1"].Points.AddY(rand.Next(100));
Chart1.Series["Series2"].Points.AddY(rand.Next(40));
}
}
이에 의한 결과는 다음과 같습니다.
앞에서 살펴본 선형 그래프의 모습보다는 더 그럴듯한 형태가 나왔습니다. 기본적으로 막대그래프에서 Series를 확장해나가면 선형 그래프나 영역그래프에서 그랬듯이 앞뒤로 Series를 배열합니다. 3개의 Series가 있다면 3줄이 되겠죠? 이러한 형태는 어떤 측면에서는 Series간의 비교가 쉬울 수 있으므로 유용합니다. 하지만 앞쪽의 그래프가 뒷 쪽의 그래프를 가리게 되면 뒷 쪽의 그래프 모습을 확인 할 수 없다거나 Series가 많아질수록 보기 어려워지는 문제가 발생합니다.(그런 이유로 위의 코드에서는 난수를 발생시킬 때 앞쪽에 위치하는 Series의 난수 발생 값을 낮게 나오도록 제한했습니다.) 때문에 3차원 형태에서도 앞에서 살펴본 막대 그래프처럼 옆으로 Series가 늘어서는 것을 원할 때가 있습니다. 이럴 때는 ChartArea의 Area3DStyle속성에 IsClustered 속성을 사용합니다. 다음처럼 .cs 코드를 변경합니다.
protected void Page_Load(object sender, EventArgs e)
{
Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsClustered = true;
Chart1.Series[0].Color = Color.FromArgb(240, Color.DodgerBlue);
Chart1.Series[1].Color = Color.FromArgb(240, Color.Tomato);
Random rand = new Random();
for (int i = 0; i < 5; i++)
{
Chart1.Series["Series1"].Points.AddY(rand.Next(100));
Chart1.Series["Series2"].Points.AddY(rand.Next(40));
}
}
이에 의한 결과는 다음과 같습니다.
IsClustered 값을 true로 주면 2차원 막대 그래프가 그러했듯이 같은 묶음의 값들이 옆으로 늘어서서 표현됩니다. 3차원 형태의 막대그래프에서 앞뒤로 그래프가 보이는 것과 옆으로 보이는 것은 그 그래프가 표현하고자 하는 데이터의 특성에 따라서 장단점이 있을 수 있으므로 경우에 따라서 IsClustered 값을 사용하시면 됩니다.
다음으로는 StackedColumn 차트에 대해서 살펴보겠습니다. StackedColumn 차트는 시리즈로 표현 하는 부분을 앞뒤나 양 옆이 아닌 위쪽으로 계속 쌓아 나가는 형태로 여러모로 쓰임새가 많은 차트 형태입니다. StackedColumn 차트를 구현하는 방법은 매우 쉽습니다. ChartType만 'StackedColumn'으로 지정해 주면 되기 때문이죠. 다음처럼 HTML코드를 변경합니다.
<asp:Chart ID="Chart1" Width="600" Height="300" runat="server">
<series>
<asp:Series ChartType="StackedColumn" Name="Series1" />
<asp:Series ChartType="StackedColumn" Name="Series2" />
<asp:Series ChartType="StackedColumn" Name="Series3" />
<asp:Series ChartType="StackedColumn" Name="Series4" />
<asp:Series ChartType="StackedColumn" Name="Series5" />
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="true"
Area3DStyle-Rotation="30" Area3DStyle-Inclination="30"
BorderColor="64, 64, 64, 64" BackColor="whitesmoke" BorderWidth="0">
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
그리고 .cs 코드는 다음처럼 코딩해 줍니다.
protected void Page_Load(object sender, EventArgs e)
{
Chart1.Series[0].Color = Color.FromArgb(240, Color.DodgerBlue);
Chart1.Series[1].Color = Color.FromArgb(240, Color.Tomato);
Chart1.Series[2].Color = Color.FromArgb(240, Color.Teal);
Chart1.Series[3].Color = Color.FromArgb(240, Color.MediumSpringGreen);
Chart1.Series[4].Color = Color.FromArgb(240, Color.MediumPurple);
Random rand = new Random();
for (int i = 0; i < 5; i++)
{
Chart1.Series["Series1"].Points.AddY(rand.Next(100));
Chart1.Series["Series2"].Points.AddY(rand.Next(80));
Chart1.Series["Series3"].Points.AddY(rand.Next(60));
Chart1.Series["Series4"].Points.AddY(rand.Next(40));
Chart1.Series["Series5"].Points.AddY(rand.Next(20));
}
}
이 코드에 의한 결과는 다음과 같습니다.
위쪽으로 잘 쌓인 막대 그래프가 나왔네요. 여기서 하나 더 StackedColumn100 차트도 살펴보겠습니다. 별다른 부분 없이 ChartType을 'StackedColumn100'으로 변경해 줍니다.
<asp:Chart ID="Chart1" Width="600" Height="300" runat="server">
<series>
<asp:Series ChartType="StackedColumn100" Name="Series1" />
<asp:Series ChartType="StackedColumn100" Name="Series2" />
<asp:Series ChartType="StackedColumn100" Name="Series3" />
<asp:Series ChartType="StackedColumn100" Name="Series4" />
<asp:Series ChartType="StackedColumn100" Name="Series5" />
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="true"
Area3DStyle-Rotation="30" Area3DStyle-Inclination="30"
BorderColor="64, 64, 64, 64" BackColor="whitesmoke" BorderWidth="0">
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
.cs 코드 쪽에서는 변경할 부분이 없습니다. 이에 의한 결과는 다음과 같습니다.
앞의 그래프와 비슷하게 생겼지만 이번에는 모든 막대의 높이가 동일하게 맞춰져 있는 것을 확인할 수 있습니다. Stacked로 시작하는 그래프는(StackedArea와 StackedBar도 있습니다.) 각 시리즈에 표현되는 값을 누적해서 보여줍니다. 반면에 Stacked~100 그래프는 전체의 값에 대한 비율을 기반으로 그래프를 표시해 줍니다. 일반적인 경우에는 절대적인 값의 비교를 위해서 StackedColumn 그래프를 사용하지만 어떤 경우에는 전체에 대한 각 요소의 비율이 중요할 때도 있기 때문에 StackedColumn100 그래프도 유용하게 사용될 수 있습니다. 이 부분은 영역(Area) 차트와 가로막대(Bar) 차트에서도 동일하게 사용됩니다.
마지막으로 Bar 차트에 대해서 살펴볼까요? 앞에서 Bar 차트는 Column 차트를 90도로 눕힌 것 외에는 다를 게 없다고 말했습니다. 정말로 그런지 StackedColumn 차트를 StackedBar 차트로 변형해 보겠습니다. HTML 코드를 다음처럼 변경합니다.
<asp:Chart ID="Chart1" Width="600" Height="300" runat="server">
<series>
<asp:Series ChartType="StackedBar" Name="Series1" />
<asp:Series ChartType="StackedBar" Name="Series2" />
<asp:Series ChartType="StackedBar" Name="Series3" />
<asp:Series ChartType="StackedBar" Name="Series4" />
<asp:Series ChartType="StackedBar" Name="Series5" />
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="true"
Area3DStyle-Rotation="30" Area3DStyle-Inclination="30"
BorderColor="64, 64, 64, 64" BackColor="whitesmoke" BorderWidth="0">
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:Chart>
.cs 코드에서는 변경할 부분이 없습니다. 변경한 코드에 의한 결과는 다음과 같습니다.
이번에는 상하 방향이 아닌 좌우 방향으로 높아지는 막대 그래프가 그려졌습니다. 2차원 형태나 Stacked를 쓰지 않는 Bar 그래프 역시 Column 그래프를 그릴 때와 동일한 환경으로 사용하면 됩니다. 이것으로 막대 차트에 대해서 살펴보았습니다. 이제는 어느 정도 내공이 있으신 분들은 더 이상 제 글을 참고하지 않더라도 다른 차트를 손쉽게 사용하실 수 있지 않을까 생각해 봅니다. 하지만 몇 가지 부분에서 직접 해보지 않는다면 실수하게 되는 부분도 있기 때문에 급하게 생각하시지 말고 천천히 글을 즐겨 주셨으면 좋겠네요.
다음 글에서는 StackedColumn 차트에 대해서 좀 더 심도있게 알아보겠습니다. 이번 글에서 이게 StackedColumn 차트입니다. 멋지죠? 우왕~ 하는 식으로 스리슬쩍 넘어갔지만 StackedColumn 차트를 실제로 사용하게 될 때에 경험하게 될만한 부분이 두 가지 있습니다. 그 부분에 대해서 언급하게 되면 글이 너무 길어질 것 같은 느낌이 들어서 부득이 하게 다음 글에서 다루도록 하겠습니다. 감기 조심하시고(이 글이 올라갈 때는 완연한 봄일지도 모르겠네요. 글쓴이는 지금 감기에 걸린 상태에서 글을 쓰고 있습니다....ㅠ.ㅠ) 다음 글에서 뵙겠습니다.
:{3} 
({4})