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.IsLogarithmicScaleBreakStyle 속성을 사용하세요. 다음의 코드 조각은 첫번째 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에서 추가 되었습니다. 이 콘트롤들에 의하여 반환된 데이터를 필터링 하기 위하여, QueryExtenderEntityDataSource 혹은 LinqDataSource 에 추가 되었습니다. QueryExtender 는 LINQ에 의존하기 때문에, 그 필터는 데이터가 페이지에 보내지기 전에 데이터베이스 서버에 제공됩니다. 그 결과 아주 효율적인 처리가 이루어집니다. QueryExtender 컨트롤은 다양한 필터 옵션들을 제공합니다. 다음의 섹션은 이 옵션들을 설명하고, 그 사용법의 예시를 제공합니다.

Search

검색 옵션을 위하여, QueryExtender  컨트롤은 지정된 필드 안의 레코드들을 찾기위하여, 텍스트 검색을 사용합니다. 다음의 예에서, 이 컨트롤은 TextBoxSearch 컨트돌 안에 들어가는 텍스트를 사용합니다. 그리고 LinqDataSource 컨트롤로 부터 반환된 데이터의 ProductNameSupplier.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 컨트롤 내부에 다양한 표현식을 사용하는 것도 가능합니다.

 


신고