Note : 종종 프로젝트를 정상적으로 생성하고 차트 컨트롤을 올려놓았음에도 불구하고 web.config의 <httpHandlers> 섹션에 차트 컨트롤을 연결하는 핸들러 태그가 등록되지 않는 경우가 있습니다. 이런 경우에는 'ChartImg.axd에 대한 자식 요청을 실행하는 동안 오류가 발생했습니다. ' 라는 식으로 에러가 발생합니다. 이런 경우에는 다음처럼 <httpHandlers> 섹션에 차트를 위한 태그를 추가해 주면 됩니다.
<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />
</httpHandlers>
물론 <httpHandlers>는 여러분이 사용하는 환경에 따라서 더 많은 핸들러 태그가 들어있을 수 있습니다. (이 코드를 덮어씌우지 마세요.)
이번에는 Chart 컨트롤에서 중요한 부분을 차지하는 ChartArea와 Series의 개념에 대해서 알아봅니다. 이름에서도 알 수 있듯이 ChartArea는 차트를 그리는 영역에 대한 부분을 담당하고 있고 Series는 개별 그래프 및 데이터에 대한 부분을 담당하고 있습니다. 쉽게 말하자면 그래프를 그리는 밑바탕은 ChartArea가(그래프의 X축 Y축 모눈 등이 여기에 포함되겠죠?) 선이나 원이나 막대 등의 개별 부분은 Series가 담당하는 의미입니다. 이쯤 되면 이렇게 생각되시는 분들이 계실 거라고 생각합니다. 마치 수학시간에 수학 공식을 나불나불 이야기 해놓고 자 이해가 가지? 하고 말하는 밥 아저씨 같은 상황 말이죠. 수학은 수학문제 풀어보면 딱 감을 알듯이 실제 코드를 보면서 이해를 해봅시다.
<asp:CHART id="Chart1" runat="server" BackColor="White" Height="300px"
Width="450px" AntiAliasing="All" ImageType="Png">
<series>
<asp:Series Name="Series1" ChartType="Line" BorderWidth="3"
ShadowColor="Gray" ShadowOffset="1" Color="230, 222, 52, 8"></asp:Series>
<asp:Series Name="Series2" ChartType="Line" BorderWidth="3"
ShadowColor="Gray" ShadowOffset="1" Color="230, 8, 89, 140"></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="맑은 고딕, 10pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, 10pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:CHART>
이번 글에서 살펴볼 컨트롤의 HTML 코드입니다. 다른 부분은 제외하고 Series와 ChartArea에만 집중을 해볼까요?
우선 Series를 살펴봅니다. 그냥 <asp:Series>로 시작해도 될 것 같은데 굳이 <series><asp:series /></series>라는 형태를 취하고 있네요. 앞의 글에서는 하나의 Series만을 사용했지만 여기에서는 두 개의 Series를 써 주었다는 걸 보면 Chart컨트롤은 복수의 Series를 지원한다는 것을 알 수 있습니다. Series는 이처럼 HTML코드로 RadioButtonList나 DropDownList처럼 계속해 추가해 주기만 하면 그것으로 확장이 끝납니다.
좀 더 Series에 대해서 살펴볼까요? 다음 내용을 보면 ID의 역할을 하는 Name 애트리뷰트를 볼 수 있습니다. 그리고 ChartType 애트리뷰트를 이용하여 그리는 차트의 형태를 지정하고 있군요. 이 애트리뷰트를 Bar나 Column같은 것으로 바꾸면 그래프가 막막 바뀔 것 같은 느낌이 드시지 않나요? Chart 컨트롤에서는 그래프의 형태를 상위가 아닌 Series 수준에서 결정하기 때문에 그만큼 하나하나의 세세한 데이터 형식에 대해서 그래프의 커스터마이징이 쉽습니다.
그리고 막대 그래프를 그리기 위한 형태를 지정해 주고 있습니다. 이 부분의 애트리뷰트는 별다른 설명없이도 이해할 수 있으실 거라 믿습니다. 한가지 첨언 하자면 Chart 컨트롤에서의 색 지정은 알파값을 포함하는 0에서 255까지의 값을 네 개 지정해 주어야 합니다. 가장 앞의 숫자가 알파값이구요. 255일 때 완전 불투명 0일때 완전 투명입니다. 그 뒤의 세 개의 숫자는 일반적인 RGB와 동일합니다. 이 부분은 첫 번째 글에서도 짧게 언급한 부분이니 기억나실 거라고 생각합니다.
그럼 다음으로 ChartArea를 살펴볼까요? 여기에서는 ChartArea를 하나만 사용하고 있기 때문에 Series에서와 같은 느낌이 오지 않지만 Chart 컨트롤은 여러 개의 ChartArea를 지원합니다. ChartArea는 HTML에서 style="position:absolute;"를 설정해준 DIV처럼 완전히 자유로운 영역지정이 가능하기 때문에 원하는 대로 전체 차트의 영역을 분할하여 사용할 수 있습니다. 또한 여러 개의 ChartArea에 입맛에 맞게 원하는 Series를 바인딩 할 수도 있습니다. 이에 대해서는 잠시 후에 살펴보겠습니다. ChartArea의 애트리뷰트를 살펴보면 뒤에 표시되는 X축 Y축의 격자의 형태를 지정해 주고 외곽에 표시되는 글자의 형태를 지정해 주고 있습니다.
다음으로 .cs코드는 다음과 같습니다.
protected void Page_Load(object sender, EventArgs e)
{
Random rand = new Random();
for (int i = 0; i < 10; i++)
{
Chart1.Series["Series1"].Points.Add(rand.Next(500));
Chart1.Series["Series2"].Points.Add(rand.Next(500));
}
}
그리고 페이지를 실행해보면 다음과 같은 선 그래프를 확인 할 수 있습니다.
간단한 코드로 하나의 영역에 두 개의 선 그래프를 그렸네요. 이번에는 HTML 코드를 조금 바꿔서 두 개의 ChartArea에 Series를 분리해 표현해 봅시다. 다음처럼 HTML 코드를 변경합니다.
<asp:CHART id="Chart1" runat="server" BackColor="White" Height="300px"
Width="450px" AntiAliasing="All" ImageType="Png">
<series>
<asp:Series Name="Series1" ChartArea="ChartArea1"
ChartType="Line" BorderWidth="3" ShadowColor="Gray"
ShadowOffset="1" Color="230, 222, 52, 8"></asp:Series>
<asp:Series Name="Series2" ChartArea="ChartArea2"
ChartType="Line" BorderWidth="3" ShadowColor="Gray"
ShadowOffset="1" Color="230, 8, 89, 140"></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="맑은 고딕, 10pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, 10pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
<asp:ChartArea Name="ChartArea2" BorderColor="64, 64, 64, 64"
BackSecondaryColor="Transparent" BackColor="Transparent"
ShadowColor="Transparent" BorderWidth="0">
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, 10pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="맑은 고딕, 10pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:CHART>
그리고 .cs 코드를 다음처럼 고쳐 씁니다.
protected void Page_Load(object sender, EventArgs e)
{
Chart1.ChartAreas["ChartArea1"].Position.Width = 50;
Chart1.ChartAreas["ChartArea1"].Position.Height = 50;
Chart1.ChartAreas["ChartArea1"].Position.X = 0;
Chart1.ChartAreas["ChartArea1"].Position.Y = 0;
Chart1.ChartAreas["ChartArea2"].Position.Width = 50;
Chart1.ChartAreas["ChartArea2"].Position.Height = 50;
Chart1.ChartAreas["ChartArea2"].Position.X = 50;
Chart1.ChartAreas["ChartArea2"].Position.Y = 50;
Random rand = new Random();
for (int i = 0; i < 10; i++)
{
Chart1.Series["Series1"].Points.Add(rand.Next(500));
Chart1.Series["Series2"].Points.Add(rand.Next(500));
}
}
그리고 페이지의 결과를 확인하면 다음처럼 두 개로 분리된 선 그래프를 확인할 수 있습니다.
우선 HTML 코드의 내용을 확인해 볼까요?
Series 부분에서 이전과 다른 것은 ChartArea 애트리뷰트를 추가 함으로서 Series가 놓일 ChartArea를 지정하는 부분입니다. 다음처럼 위치할 ChartArea를 지정하였습니다.
<asp:Series Name="Series1" ChartArea="ChartArea1"
ChartType="Line" BorderWidth="3" ShadowColor="Gray"
ShadowOffset="1" Color="230, 222, 52, 8"></asp:Series>
<asp:Series Name="Series2" ChartArea="ChartArea2"
ChartType="Line" BorderWidth="3" ShadowColor="Gray"
ShadowOffset="1" Color="230, 8, 89, 140"></asp:Series>
그리고 이전 코드와 동일한 ChartArea를 하나 더 만들고 Name을 ChartArea2로 지정하였습니다.
이번에는 .cs 코드를 살펴보겠습니다. 아래에 값을 추가하는 부분은 이전과 동일하니 앞의 부분만 살펴보겠습니다. ChartArea[index].Position의 Width, Height, X, Y 값을 지정 함으로서 ChartArea가 위치할 너비, 높이, X축 시작점, Y축 시작점을 지정합니다. 여기서 주의할 점은 이 값은 0에서 100까지의 정수만 사용할 수 있다는 부분입니다. 얼핏 생각하면 픽셀단위의 지정도 가능할 법 한데 퍼센트 단위의 지정만이 가능합니다. 위의 코드에서는 50%의 너비 50%높이를 지정했으므로 전체 차트에 비해서 1/4의 영역을 가지는 ChartArea를 만들게 되겠네요. X, Y로 지정하는 위치 역시 상대값 이므로 두 개의 ChartArea는 전체 영역을 4분의 1로 나눈 곳에서 좌상단과 우 하단에 위치하게 됩니다.
이쯤이면 앞에서 살펴본 결과의 내용에 대해서 이해가 되셨을 거라고 믿습니다.
마지막으로 z-index를 이용해서 많은 사람들이 Chart 컨트롤에 첨부된 문서에는 있지만 이게 어떻게 구현되냐고 물어보는 차트를 만들어 보겠습니다. 다음처럼 HTML 코드를 변경합니다.
<asp:CHART id="Chart1" runat="server" BackColor="White" Height="300px"
Width="450px" AntiAliasing="All" ImageType="Png"
PaletteCustomColors="200, 222, 52, 8; 200, 8, 89, 140; 200, 49,
130, 239; 200, 189, 186, 189;" Palette="None">
<series>
<asp:Series Name="Series1" ChartArea="ChartArea1" ChartType="Pie" />
<asp:Series Name="Series2" ChartArea="ChartArea2" ChartType="Pie" />
<asp:Series Name="Series3" ChartArea="ChartArea3" ChartType="Pie" />
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64"
BackSecondaryColor="Transparent" BackColor="Transparent"
ShadowColor="Transparent" BorderWidth="0">
</asp:ChartArea>
<asp:ChartArea Name="ChartArea2" BorderColor="64, 64, 64, 64"
BackSecondaryColor="Transparent" BackColor="Transparent"
ShadowColor="Transparent" BorderWidth="0">
</asp:ChartArea>
<asp:ChartArea Name="ChartArea3" BorderColor="64, 64, 64, 64"
BackSecondaryColor="Transparent" BackColor="Transparent"
ShadowColor="Transparent" BorderWidth="0">
</asp:ChartArea>
</chartareas>
</asp:CHART>
그리고 다음처럼 .cs코드를 변경합니다.
protected void Page_Load(object sender, EventArgs e)
{
Chart1.ChartAreas["ChartArea1"].Position.Width = 50;
Chart1.ChartAreas["ChartArea1"].Position.Height = 50;
Chart1.ChartAreas["ChartArea1"].Position.X = 10;
Chart1.ChartAreas["ChartArea1"].Position.Y = 10;
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Inclination = 55;
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Rotation = 0;
Chart1.ChartAreas["ChartArea2"].Position.Width = 50;
Chart1.ChartAreas["ChartArea2"].Position.Height = 50;
Chart1.ChartAreas["ChartArea2"].Position.X = 20;
Chart1.ChartAreas["ChartArea2"].Position.Y = 20;
Chart1.ChartAreas["ChartArea2"].Area3DStyle.Enable3D = true;
Chart1.ChartAreas["ChartArea2"].Area3DStyle.Inclination = 55;
Chart1.ChartAreas["ChartArea2"].Area3DStyle.Rotation = 0;
Chart1.ChartAreas["ChartArea3"].Position.Width = 50;
Chart1.ChartAreas["ChartArea3"].Position.Height = 50;
Chart1.ChartAreas["ChartArea3"].Position.X = 30;
Chart1.ChartAreas["ChartArea3"].Position.Y = 30;
Chart1.ChartAreas["ChartArea3"].Area3DStyle.Enable3D = true;
Chart1.ChartAreas["ChartArea3"].Area3DStyle.Inclination = 55;
Chart1.ChartAreas["ChartArea3"].Area3DStyle.Rotation = 0;
ChartArea[] areas = new ChartArea[3];
areas[0] = Chart1.ChartAreas[0];
areas[1] = Chart1.ChartAreas[1];
areas[2] = Chart1.ChartAreas[2];
Chart1.ChartAreas.Clear();
Chart1.ChartAreas.Add(areas[2]);
Chart1.ChartAreas.Add(areas[1]);
Chart1.ChartAreas.Add(areas[0]);
Random rand = new Random();
for (int i = 0; i < 4; i++)
{
Chart1.Series["Series1"].Points.Add(rand.Next(500));
Chart1.Series["Series2"].Points.Add(rand.Next(500));
Chart1.Series["Series3"].Points.Add(rand.Next(500));
}
}
그리고 결과를 확인하면 다음과 같은 차트를 확인할 수 있습니다.
오오.... 그레이트 하지 않습니까? 음... 아닐지도 모르겠군요. 아무튼 제한 없이 여러 개의 ChartArea와 Series를 조합하여 사용할 수 있으므로 정말 많은 조합을 할 수 있습니다. 그럼 코드를 살펴보겠습니다.
HTML에서는 굳이 살펴볼 부분이 없다고 믿고 .cs코드만을 살펴보겠습니다. .cs코드에서 ChartArea의 z-index를 지정하는 부분을 살펴보겠습니다. 불행히도 Chart 컨트롤에서는 DIV의 z-index처럼 별도의 속성으로 z축의 위치를 지정할 수 없습니다. 하지만 Chart.ChartAreas 콜렉션에 ChartArea를 넣는 순서에 따라서 상하 위치가 배열됩니다. 가장 먼저 넣은 ChartArea는 당연하겠지만 가장 아래로 내려갑니다. 이 부분은 GDI로 그래프를 그릴 때 먼저 그린 부분이 당연히 밑 쪽에 깔리게 된다는 걸 생각하면 이해가 쉬우실 거라고 생각합니다. 원래의 HTML코드에서는 ChartArea1, ChartArea2, ChartArea3의 순서대로 입력이 되기 때문에 ChartAreas.Clear()를 해서 콜렉션을 비우고 역순으로 ChartArea를 넣어 줌으로서 결과로 보듯이 ChartArea1이 가장 위에 그리고 다른 ChartArea가 순서대로 아래쪽에 그려짐을 확인 할 수 있습니다.
이것으로 Series와 ChartArea에 대한 간단한 예제를 살펴 봄으로서 기본적인 내용을 살펴보았습니다. 지금 설명하지 않은 여러 가지 속성이나 애트리뷰트는 글이 계속되면서 하나하나 다뤄질 테니 이건 뭐길래 설명을 안 해? 라고 생각하시지 말고 천천히 살펴보시면 됩니다. 처음부터 모든걸 알아낼 수는 없으니까요. 다음 글에서부터는 실제적으로 사용되는 여러 형태의 차트를 살펴보고 실제로 쓸만한 형태로 차트를 꾸며보겠습니다. 수고하셨습니다.
:{3} 
({4})