ASP.NET 4 와 Visual Studio 2010 Web Development Beta 2 Overview - Web Forms(5)

ASP.NET Chart Control

ASP.NET Chart 컨트롤은 닷넷 프레임워크 안의 데이터 시각화를 확장하여 제공했습니다. Chart 컨트롤을 사용하면서, 당신은 쉽게 차트가 있는 ASP.NET 페이지들을 생성할 수 있습니다. 그차트는 복집한 통계 혹은 재무적 분석을 위하여, 직관적이고 시각적으로 강력한 차트입니다. ASP.NET 차트 컨트롤은 닷넷 프레임워크 3.5 SP1 배포에서 추가되어 소개되었습니다. 그리고 그것은 닷넷 프레임워크 4.0 배포의 일부가 될 것입니다.

차트 컨트롤의 주요 특징은 다음과 같습니다:

• 35 개의 서로 다른 차트 유형.
• 제한 없는 차트 범위, 제목, 설명 그리고 주석.
• 모든 차트 요소들을 위한 아주 다양한 표현 설정.
• 대부분의 차트 유형들에 지원하는 3-D.
• 데이터 포인트 주변에 자동적으로 들어 맞는 스마트 데이터 레이블
• 선 제거, 눈금 생략, 대수의 눈금.
• 데이터 분석과 가공을 위한 50개 이상의 재무적, 통계적 공식.
• 간단한 바인딩과 차트 데이터의 조작.
• 날짜, 시간, 통화 같은 공통 데이터 양식을 위한 지원.
• AJA를 사용하는 클라이언트 클릭 이벤트를 포함하면서, 상호작용과 이벤트 중심의 커스터마이즈 지원.
• 상태 관리.
• 이진 문자열.

다음의 표들은 ASP.NET 차트 컨트롤에 의하여 생성된 재무 차트의 예를 보여줍니다.

Figure 2: ASP.NET 차트 컨트롤의 예들

ASP.NET 차트 컨트롤을 사용하는 법의 더 많은 예를 위하여, MSDN의 웹사이트에서 다음의  Samples Environment for Microsoft Chart Controls 샘플 코드를 다운로드 하세요. 당신은 Chart Control Forum 에서 커뮤니티 내용에서 더 많은 예를 찾을 수 있습니다.

Adding the Chart Control to an ASP.NET Page

다음의 예는 마크업을 사용하여 ASP.NET 페이지에 Chart 컨트롤을 추가하는 법을 보여줍니다. 예를 들어, Chart 컨트롤은 정적 데이터 포인트를 위하여 컬럼 차트를 생성합니다.

 
<asp:Chart ID="Chart1" runat="server"> 
  <Series> 
    <asp:Series Name="Series1" ChartType="Column"> 
      <Points> 
        <asp:DataPoint AxisLabel="Product A" YValues="345"/> 
        <asp:DataPoint AxisLabel="Product B" YValues="456"/> 
        <asp:DataPoint AxisLabel="Product C" YValues="125"/> 
        <asp:DataPoint AxisLabel="Product D" YValues="957"/> 
      </Points> 
    </asp:Series> 
  </Series> 
  <ChartAreas> 
    <asp:ChartArea Name="ChartArea1"> 
      <AxisY IsLogarithmic="True" /> 
    </asp:ChartArea> 
  </ChartAreas> 
  <Legends> 
    <asp:Legend Name="Legend1" Title="Product Sales" /> 
  </Legends> 
</asp:Chart> 

 

Using 3-D Charts

Chart 컨트롤은 ChartAreas 콜렉션을 포함합니다. 그것은 차트 영역의 특성을 정의 하는 ChartArea 객체를 포함 할 수 있습니다. 예를 들어, 차트 영역을 위하여 3-D를 사용하고, 다음의 예에서 처럼 Area3DStyle 속성을 사용합니다: 

 
<asp:ChartArea Name="ChartArea1"> 
  <area3dstyle 
      Rotation="10" 
      Perspective="10" 
      Enable3D="True" 
      Inclination="15" 
      IsRightAngleAxes="False" 
      WallWidth="0" 
      IsClustered="False" /> 
  <%-- Additional markup here --%> 
</asp:ChartArea> 

아래의 표는 Bar 차트 유형의 4개의 시리즈와 함께 3-D 차트를 보여줍니다.

Figure 3: 3-D Bar Chart

 

Using Scale Breaks and Logarithmic Scales

눈금 생략과 대수의 눈금은 차트에 세련미를 더하는 두가지 차가적인 방법이 있습니다. 이 특징들은 차트 영역에서 각각의 축에 명시합니다. 예를 들어, 차트 영역의 첫번째 Y 축에 이 특성을 사용하려면, ChartArea 객체안의 AxisY.IsLogarithmic 와 ScaleBreakStyle 속성을 사용하세요. 다음의 코드 조각은 첫번째 Y 축상에서 눈금 생략을 사용하는 법을 보여줍니다.
 

  <asp:ChartArea Name="ChartArea1"> 
    <axisy> 
      <ScaleBreakStyle BreakLineStyle="Wave" CollapsibleSpaceThreshold="40" Enabled="True" /> 
    </axisy> 
<%-- Additional markup here --%> 
</asp:ChartArea> 

아래의 표는 눈금 생략을 활성화시켜 Y축을 보여줍니다.

Figure 4: Scale Breaks

데이터 기반 웹페이지를 만드는 개발자들에게 데이터를 필터링은 아주 일반적인 작업입니다. 이것은 전통적으로 데이터 소스 컨트롤 안의 where 구문을 빌드하는 것에 의하여 처리되었습니다. 이 접근은 복잡하게 될 수 있고, 어떤 경우에는 where 문법이 기초 데이터의 모든 기능에 불이익을 주기도 합니다. 더 쉽게 필터링 하기 위하여, 새로운 QueryExtender 컨트롤이 ASP.NET 4에서 추가 되었습니다. 이 콘트롤들에 의하여 반환된 데이터를 필터링 하기 위하여, QueryExtender 이 EntityDataSource 혹은 LinqDataSource 에 추가 되었습니다. QueryExtender 는 LINQ에 의존하기 때문에, 그 필터는 데이터가 페이지에 보내지기 전에 데이터베이스 서버에 제공됩니다. 그 결과 아주 효율적인 처리가 이루어집니다. QueryExtender 컨트롤은 다양한 필터 옵션들을 제공합니다. 다음의 섹션은 이 옵션들을 설명하고, 그 사용법의 예시를 제공합니다.

Search

검색 옵션을 위하여, QueryExtender  컨트롤은 지정된 필드 안의 레코드들을 찾기위하여, 텍스트 검색을 사용합니다. 다음의 예에서, 이 컨트롤은 TextBoxSearch 컨트돌 안에 들어가는 텍스트를 사용합니다. 그리고 LinqDataSource 컨트롤로 부터 반환된 데이터의 ProductName 과 Supplier.CompanyName 컬럼 안의 내용에서 검색을 합니다.

<asp:LinqDataSource ID="dataSource" runat="server"> TableName="Products">
</asp:LinqDataSource>
<asp:QueryExtender TargetControlID="dataSource" runat="server">
  <asp:SearchExpression DataFields="ProductName, Supplier.CompanyName"
      SearchType="StartsWith">
    <asp:ControlParameter ControlID="TextBoxSearch" />
  </asp:SearchExpression>
</asp:QueryExtender>

Range

범위 옵션은 검색 옵션과 비슷합니다. 그러나 범위를 정의하기 위하여 한 쌍의 값을 지정합니다. 다음의 예에서, QueryExtender 컨트롤은 LinqDataSource 컨트롤로 부터 반환된 데이터 안의 UnitPrice 컬럼을 검색합니다. 범위는 페이지의 TextBoxFrom 과 TextBoxTo  컨트롤에서 읽어옵니다.

 
<asp:LinqDataSource ID="dataSource" runat="server"> TableName="Products"> 
</asp:LinqDataSource> 
<asp:QueryExtender TargetControlID="dataSource" runat="server"> 
  <asp:RangeExpression DataField="UnitPrice" MinType="Inclusive" 
      MaxType="Inclusive"> 
    <asp:ControlParameter ControlID="TextBoxFrom" /> 
    <asp:ControlParameter ControlID="TexBoxTo" /> 
  </asp:RangeExpression> 
</asp:QueryExtender> 

 

PropertyExpression

PropertyExpression 옵션은 속성값에 비교를 정의 할 수 있도록 합니다. PropertyExpression이 참이라면, 설명된 데이터가 반환 됩니다. 다음의 예에서, QueryExtender 컨트롤은 페이지의 CheckBoxDiscontinued 컨트롤의 값으로 Discontinued 컬럼의 데이터를 비교하여 필터링합니다.

 
<asp:LinqDataSource ID="dataSource" runat="server" TableName="Products"> 
</asp:LinqDataSource> 
<asp:QueryExtender TargetControlID="dataSource" runat="server"> 
  <asp:PropertyExpression> 
    <asp:ControlParameter ControlID="CheckBoxDiscontinued" Name="Discontinued" /> 
  </asp:PropertyExpression> 
</asp:QueryExtender>


 

CustomExpression

마지막으로, QueryExtender 컨트롤에서 사용하는 CustomExpression을 설명합니다. 이 옵션은 사용자 정의 필터 로직을 정의하는 페이지 안의 함수를 호출 할 수 있게 합니다. 다음의 예는 QueryExtender 컨트롤 안의 사용자 정의 표현식을 선언적으로 지정하는 법을 보여줍니다.

 
<asp:LinqDataSource ID="dataSource" runat="server" TableName="Products"> 
</asp:LinqDataSource> 
<asp:QueryExtender TargetControlID="dataSource" runat="server"> 
  <asp:CustomExpression OnQuerying="FilterProducts" /> 
</asp:QueryExtender> 



 

다음의 예는 QueryExtender 컨트롤에 호출된 사용자 정의 함수를 보여줍니다. 이 경우에, Where 구문을 포함한 데이터베이스 쿼리를 사용하는 것 대신에, 이 코드는 데이터를 필터링 하기 위하여 LINQ 쿼리를 사용하였습니다.

 
protected void FilterProducts(object sender, CustomExpressionEventArgs e) 
{ 
      e.Query = from p in e.Query.Cast<Product>() 
      where p.UnitPrice >= 10 
      select p; 
}


 

이 예는 QueryExtender 컨트롤에서 사용되고 있는 단지 하나의 표현을 한 번에 보여준 것입니다. 그러나, QueryExtender 컨트롤 내부에 다양한 표현식을 사용하는 것도 가능합니다.