TAEYO.NET

얼마 전 ASP.NET의 권위자인 스콧 구슬리의 블로그(http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx)등을 통해서 Microsoft Chart Control의 릴리즈가 발표되었습니다.

.NET Framework 3.5의 공개로 인해서 ASP.NET에도 여러 가지 많은 기능이 추가 되었지만 다른 어떤 기능 보다 도 막강한 기능을 자랑한다고 생각하는 것이 이 Microsoft Chart Control입니다.

이전에 ASP.NET에서 차트를 작성하기 위해서는 ChartFX같은 상용 차트 컨트롤을 사용하거나 HTTP 핸들러를 이용해 직접 차트를 그릴 수 밖에 없었는데요. 비용 문제나 구현 간편성을 생각해보면 일반적인 홈페이지에서 차트를 만드는 것은 그리 쉬운 일은 아니었습니다. 때문에 간간히 간단한 막대 그래프를 HTML태그를 이용해 보여주는 정도에 그치는 경우가 많았죠. 개인적으로는 HTTP 핸들러 구현을 통해서 여러 가지 차트를 만들어보다가 이 컨트롤을 만나게 되어서 나름 허무하기도 하고 너무 기쁘기도 합니다. 그만큼 강력한 기능을 자랑하는 컨트롤입니다.

Microsoft Chart Control을 사용하기 위해서는 다음의 조건이 필요합니다.

Microsoft .NET Framework 3.5 SP1이 구동되는 IIS 서버
Microsoft Chart Control

그리고 비주얼 스튜디오에서의 개발 편의성을 위해서 Add-in과 Document 및 Sample을 제공합니다. 필요한 프로그램의 다운로드는 위에서 알려드린 스콧 구슬리의 글에 있는 링크를 따라가시면 모두 다운로드가 가능합니다.

Microsoft Chart Control의 강력한 점은 여러 가지 형태의 차트를 제공한다는 부분입니다. 영역그래프, 수직/수평 막대그래프, 원형그래프, 분산그래프, 주식 등에 사용되는 전문적인 그래프, 피라미드그래프, 단위그래프 등을 지원하고 이러한 그래프마다 여러 가지 형태를 제공하기 때문에 Chart Control의 문서에서 200여 가지의 그래프를 제공한다고 말하는 것이 빈말은 아닙니다. 차차 살펴보겠지만 이러한 차트의 커스터마이징이 굉장히 폭넓게 가능하기 때문에 상용 컨트롤에서만 느낄 수 있었던 여러 가지를 구현해 볼 수 있습니다.

그럼 서론은 걷어내고 간단하면서도 멋진 그래프를 하나 만들어 보겠습니다.

우선 위에 적어놓은 조건을 모두 설치해 주시고(Add-in까지 설치해 주세요. Document나 Sample은 일단 패스입니다. 하지만 꼭 필요합니다. MSDN처럼요) Visual Studio를 시작합니다. 그리고 ASPX페이지를 하나 만듭니다. Add-in이 정상적으로 설치되었다면 도구상자의 Data 혹은 데이터 패널에 Chart 컨트롤이 추가되어 있을 것입니다.

만약 Chart 컨트롤이 보이지 않는다면 패널의 제목에서 오른클릭을 하고 항목 선택을 눌러 나온 다이얼로그에서 Chart 컨트롤(.NET Framework 구성요소에 있습니다)을 추가합니다.

이 때 System.Web.UI.DataVisualization.Charting 네임스페이스의 컨트롤을 추가해 주어야 합니다. 네임스페이스의 이름을 보면 아시겠지만 System.Windows.Forms.DataVisualization.Charting 네임스페이스의 Chart 컨트롤은 윈도우즈 폼을 위한 컨트롤입니다. 가능하다면 간략하게 나마 이 컨트롤에 대해서도 다뤄보겠습니다.

컨트롤을 확인했다면 컨트롤을 ASPX페이지에 드래그해서 올려놓습니다.

<body>
    <form id="form1" runat="server">
    <div>    
        <asp:CHART id="Chart1" runat="server" BackColor="White" Height="300px" 
           Width="450px" AntiAliasing="All" ImageType="Png" Palette="None">
           PaletteCustomColors="230, 222, 52, 8; 230, 8, 89, 140; 230, 49, 130, 239; 
               230, 189, 186, 189;" 
          <titles>
               <asp:Title Font="맑은 고딕, 18pt, style=Bold" Text="음료(?) 판매량" 
                   ForeColor="0, 0, 0"></asp:Title>
          </titles>
          <legends>
              <asp:Legend BackColor="Transparent" Alignment="Near" Docking="Right"  
                  Font="맑은 고딕, 9pt" IsTextAutoFit="False" Name="Default" 
                  LegendStyle="Column">
              </asp:Legend>
          </legends>
          <series>
              <asp:Series Name="Default" ChartType="Pie"></asp:Series>
          </series>
          <chartareas>
              <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" 
                  BackSecondaryColor="Transparent" BackColor="Transparent" 
                  ShadowColor="Transparent" BorderWidth="0">
	       <area3dstyle Rotation="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>      
    </div>
    </form>
</body>

제법 코드가 복잡해 보이네요. 하지만 조금만 더 힘내 봅시다. cs파일의 Page_Load 메서드에 다음의 코드를 추가해 줍니다.

    protected void Page_Load(object sender, EventArgs e)
    {
        string[] xValues = { "코카콜라", "펩시콜라", "칠성사이다", "참이슬" };
        int[] yValues = { 50, 60, 70, 80 };

        // TOS 에이전트 현황 차트에 대한 코드
        Chart1.Series["Default"].Points.DataBindXY(xValues, yValues);

        Chart1.Series["Default"]["PieLabelStyle"] = "Disabled";
        Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

        Chart1.ChartAreas["ChartArea1"].Area3DStyle.Inclination = 55;
        Chart1.ChartAreas["ChartArea1"].Area3DStyle.Rotation = 0;
    }

아마도 using 문을 통해서 다음의 두 네임스페이스를 연결해 주어야 할 것입니다.

정상적으로 여기까지의 단계를 따라 했다면 다음과 같은 차트를 확인할 수 있습니다.

어떤 분들은 오오~ 라고 하면서 탄성을 보이는 분들도 있을 테고, 이게 뭐고 하면서 뚱하신 분들도 계실 텐데요. 제 경우에는 이정도 단순한(?) 코드를 통해서 이 정도의 결과가 나온다는 점에 상당히 쇼크(?)를 받은 축에 속합니다. 첫 강좌이니 만큼 처음부터 자세한 내용을 살펴보지는 않겠습니다. 하지만 컨트롤의 구조가 직관적인 만큼 어느 정도의 내공을 쌓으신 분들은 이 정도로도 많은 정보를 얻으실 수 있을 거라고 생각되네요.

우선 Chart 컨트롤은 범례(Legends), ChartArea(표시하는 영역을 담당), Series(데이터를 담당), 제목(Titles)으로 구성됩니다. 그리고 당연하지만 차트의 크기 지정도 가능하고 이미지를 그릴때 안티 앨리어징도 지원하는 군요. 색을 지정하는 부분을 보니 RGB와는 조금 달라 보입니다. RGB라면 세 개의 정수 값 일 텐데 여기에서는 정수가 네 개가 사용되는 군요. WPF등에서 사용되는 색상처럼 Chart Control에서는 제 4의 값인 알파값을 사용합니다. 반투명한 색상 지정 역시 사용 가능하고, 3차원 형태의 그래프도 지원하네요. 또한 세세한 부분 까지 문자 설정이 가능함도 살펴볼 수 있습니다.

이쯤 되면 슬슬 느낌이 오시나요? 다음 강좌부터는 Chart 컨트롤을 사용하는 밑바닥부터 내용을 다뤄 보겠습니다. 이 강좌를 통해서 저 같이 여러 형태의 그래프를 구현하고자 하는 욕망이 있었던 분들이 즐거운 강좌가 되었으면 하네요.