Spread.NET ASP.NET 데이터 시각화

다양한 차트 유형

ActiveChart

ActiveChart를 이용하여 다양한 스타일의 2D & 3D 차트를 생성할 수 있습니다. ActiveChart는 최종 사용자에게 디자이너 기능을 제공합니다. 외부 데이터 소스를 바인딩할 때 최종 사용자는 런타임에 차트 유형과 스타일을 수정할 수 있습니다. 또한 최종사용자는 Spread 안에 차트를 생성 및 수정할 수 있습니다. MS-Excel과 유사한 방식으로 사용 가능합니다. 이처럼 다양하고 풍부한 기능이 제공됨으로써 최종 사용자의 사용 편의성 또한 크게 증대되었습니다.

12가지 차트와 85가지 차트 유형:

세로막대형

가로막대형

거품형

도넛형

꺾은선형

영역형

주식형

방사형

원형

XY(분산형)

표면형

극좌표형

세로막대형

세로막대형 차트유형: 묶은 세로막대형，누적 세로막대형，100% 기준 누적 세로막대형，고저 세로막대형，3차원 묶은 세로막대형，3차원 누적 세로막대형，3차원 100% 기준 누적 세로막대형，3차원 세로막대형，3차원 고저 세로막대형，묶은 원통형, 누적 원통형, 3차원 100% 누적 기준 원통형, 3차원 원통형, 고저 원통형, 묶은 원뿔형, 누적 원뿔형, 100% 누적 기준 원뿔형, 3차원 원뿔형, 고저 원뿔형, 묶은 피라미드형, 누적 피라미드형, 100% 기준 누적 피라미드형, 3차원 피라미드형, 고저 피라미드형

꺾은선형

꺾은선형 차트유형: 꺾은선형，누적 꺾은선형，100% 기준 누적 꺾은선형，표식이 있는 꺾은선형，표식이 있는 누적 꺾은선형，표식이 있는 100% 기준 누적 꺾은선형，3차원 꺾은선형피라미드형

원형

원형 차트유형: 2차원 원형，3차원 원형，쪼개진 원형，3차원 쪼개진 원형라미드형

가로막대형

가로막대형 차트유형: 묶은 가로막대형，누적 가로막대형，100% 기준 누적 가로막대형，고저 가로막대형，3차원 묶은 가로막대형，3차원 누적 가로막대형，3차원 100% 기준 누적 가로막대형，3차원 고저 가로막대형，묶은 원통형(가로), 누적 원통형(가로), 100% 누적 기준 원통형(가로), 고저 원통형(가로), 묶은 원뿔형(가로), 누적 원뿔형(가로), 100% 누적 기준 원뿔형(가로), 고저 원뿔형(가로), 묶은 피라미드형(가로), 누적 피라미드형(가로), 100% 기준 누적 피라미드형(가로), 고저 피라미드형(가로)

영역형

영역형 차트유형: 영역형，누적 영역형，100% 기준 누적 영역형，고저 영역형，3차원 영역형，3차원 누적 영역형，3차원 100% 기준 누적 영역형，3차원 고저 영역형

XY(분산형)

XY 분산형 차트유형: 표식이 있는 분산형, 직선이 있는 분산형, 직선과 표식이 있는 분산형

거품형

거품형 차트 유형: 2차원 거품형, 3차원 거품형

주식형

주식형 차트 유형: 고가-저가-종가, 시가-고가-저가-종가, 시가-고가-저가-촛불형 종가

표면형

표면형 차트 유형: 직선이 있는 표면형，직선과 표식이 있는 표면형，표식만 있는 표면형, 3차원 표면형

도넛형

도넛형 차트 유형: 도넛형, 쪼개진 도넛형

방사형

방사형 차트 유형: 방사형，직선과 표식이 있는 방사형，표식만 있는 방사형, 채워진 방사형

극좌표형

극좌표형 차트 유형: 극좌표형，직선과 표식이 있는 극좌표형，표식이 있는 극좌표형，채워진 극좌표형

FpChart 사용방법

FpChart 사용방법 - 샘플 다운로드

Spread는 85가지의 다양한 차트 유형을 제공합니다. 워크시트 데이터를 기반으로 빠르고 간편하게 차트를 직접 생성할 수 있습니다. 또한 소프트웨어 사용자는 Visual Studio 디자인 환경에서 차트의 제목, 번호, 축, 스타일, 범례 등 모든 요소를 필요에 따라 맞춤 설정할 수 있습니다.
단, Spread 입문 사용자의 경우 FpChart 사용 시 필요한 설치 요소가 많아 난감할 수 있습니다. 이에 본 장에서는 FpChart 초보자를 대상으로 한 FpChart 사용방법을 소개합니다.

단계별 설명:

1. 데이터 소스 설정

	DataTable dt = new DataTable("Test");
	DataRow dr = default(System.Data.DataRow);
	dt.Columns.Add("명칭");
	dt.Columns.Add("수량");
	dr = dt.NewRow();
		dr[0] = "전자기기";
		dr[1] = 0.2;
	dt.Rows.Add(dr);
	dr = dt.NewRow();
		dr[0] = "의류";
		dr[1] = 0.5;
	dt.Rows.Add(dr);
	dr = dt.NewRow();
		dr[0] = "가구";
		dr[1] = 0.3;
	dt.Rows.Add(dr);

2. BarSeries 설정

	FarPoint.Web.Chart.BarSeries series = new FarPoint.Web.Chart.BarSeries();

    // 차트 표시 데이터 설정
    series.Values.DataSource = dt;

   	series.Values.DataField = dt.Columns[1].ColumnName;

    // 다양한 색 표시 기능 사용
    series.VaryColors = true;

    // X축 표시명 설정
    series.CategoryNames.Add("전자기기");
    series.CategoryNames.Add("의류");
    series.CategoryNames.Add("가구");

    series.LabelVisible = true;

3. YPlotArea 설정

	FarPoint.Web.Chart.YPlotArea plotArea = new FarPoint.Web.Chart.YPlotArea();
	// 표시 단위 20%로 설정
	//plotArea.YAxes[0].DisplayUnits = 0.5;
	// Y축 표시 단위 Percentage로 설정
	plotArea.YAxes[0].LabelNumberFormat = "00.0%";
	// YPlotArea 표시 위치 설정
	plotArea.Location = new System.Drawing.PointF(0.2F, 0.2F);
	// YPlotArea 크기 설정
	plotArea.Size = new System.Drawing.SizeF(0.6F, 0.6F);
	plotArea.Series.Add(series);

4. 차트 범례 설정

	LegendArea legend = new LegendArea();
	legend.Location = new PointF(0.98f, 0.5f);
	legend.AlignmentX = 1.0f;
	legend.AlignmentY = 0.5f;

5. 차트 탭(Label) 설정

	LabelArea label = new LabelArea();
	label.Text = "상품 유통";
	label.Location = new PointF(0.5f, 0.02f);
	label.AlignmentX = 0.5f;
	label.AlignmentY = 0.0f;

6. 마지막으로 WebConfig 파일에 아래의 정보를 추가합니다.

	<httpHandlers>
	  <add path="FpChart.axd" verb="*" type="FarPoint.Web.Chart.ChartImageHttpHandler" validate="true" />
	</httpHandlers>

FpChart 사용방법 - 샘플 다운로드

차트 동적 툴팁(ToolTip) 추가

차트 ToolTip - 샘플 다운로드

Spread 표(그리드) 컨트롤에 차트를 삽입시키는 방법은 매우 자주 사용되는 방법입니다. Spread 컨트롤은 5.0버전부터 차트 내장 기능을 지원하며 동시에 85가지 차트 유형을 제공합니다. 본 장에서는 차트의 동적 알림 기능 구현 방법에 대해 알아봅니다.

차트는 포그라운드에서 그림(이미지)로 렌더링되기 때문에 HTTPHandlers를 추가함으로써 구분을 짓고 포그라운드에서 정확한 작업을 수행할 수 있도록 해야 합니다.

차트틑 포그라운드에서 그림(이미지)로 렌더링되기 때문에 HTTPHandlers를 추가함으로써 구분짓고 포그라운드에서 정확한 작업을 수행할 수 있도록 해야 합니다.

<httpHandlers>
  <add
    path="FpChart.axd"
    verb="*"
    type="FarPoint.Web.Chart.ChartImageHttpHandler"
    validate="true"
  />
</httpHandlers>

다음과 같은 코드를 통해 SpreadChart를 추가합니다：

	FpSpread1.Sheets[0].AddChart(0, 0, typeof(FarPoint.Web.Chart.BarSeries), 600, 600, 50, 50,
	FarPoint.Web.Chart.ChartViewType.View3D, true);

이제 동적 알림 기능 구현에 대해 알아보도록 하겠습니다.
구현 방법은 매우 간단합니다. AutoGenerateMapAreaToolTip 속성을 ‘true’로 설정하면 차트의 자동 알림이 생성됩니다. RenderMapArea 속성을 ‘True’로 설정하면 차트는 Map형식으로 렌더링을 진행하게 됩니다.

	FpSpread1.Sheets[0].Charts[0].RenderMapArea = true;
	FpSpread1.Sheets[0].Charts[0].AutoGenerateMapAreaToolTip = true;
	FpSpread1.Sheets[0].Charts[0].HotSpotMode = HotSpotMode.Inactive;

차트 ToolTip - 샘플 다운로드

스파크라인

Spread for ASP.NET에서는 스파크라인(Sparklines)을 셀에 추가할 수 있으며 스파크라인은 직접 셀 안에 그릴 수 있는 미니 차트로서 데이터 시각화에 사용됩니다. Spread는 막대형, 선형, 플러스/마이너스형 스파크라인을 지원하며 최신 Excel 파일과 호환 및 전환이 가능합니다. 스파크라인의 3가지 유형은 아래와 같습니다.

막대형 스파크라인는 막대형 차트 방식으로 데이터를 표시하고, 꺾은선형 스파크라인은 꺾은선 차트 형식으로 데이터를 표시합니다. 고저형 스파크라인은 같은 크기의 도형을 사용하여 데이터를 표시하되 데이터값이 플러스일 때는 X축 위에, 마이너스일 때에는 X축 아래에 위치합니다.
또한 고, 저, 플러스, 마이너스, 시작/끝에 해당하는 스파크라인 의 표시 색깔을 설정할 수 있습니다.

코드는 아래와 같습니다.

	FarPoint.Web.Spread.SheetView sv = new FarPoint.Web.Spread.SheetView();
	FarPoint.Web.Spread.Chart.SheetCellRange data = new FarPoint.Web.Spread.Chart.SheetCellRange(sv, 0,0,1, 5);
	FarPoint.Web.Spread.Chart.SheetCellRange data2 = new FarPoint.Web.Spread.Chart.SheetCellRange(sv, 5,0,1,1);
	FarPoint.Web.Spread.ExcelSparklineSetting ex = new FarPoint.Web.Spread.ExcelSparklineSetting();
	ex.ShowMarkers = true;
	ex.ShowNegative = true;
	ex.NegativeColor = Color.Red;
	ex.SeriesColor = Color.Olive;
	fpSpread1.Sheets[0] = sv;
	fpSpread1.Sheets[0].RowCount = 6;
	fpSpread1.Sheets[0].ColumnCount = 6;
	sv.Cells[0, 0].Value = 2;
	sv.Cells[0, 1].Value = 5;
	sv.Cells[0, 2].Value = 4;
	sv.Cells[0, 3].Value = -1;
	sv.Cells[0, 4].Value = 3;
	fpSpread1.Sheets[0].AddSparkline(data, data2, FarPoint.Web.Spread.SparklineType.Column, ex);

	Dim sv As New FarPoint.Web.Spread.SheetView()
	Dim data As New FarPoint.Web.Spread.Chart.SheetCellRange(sv, 0, 0, 1, 5)
	Dim data2 As New FarPoint.Web.Spread.Chart.SheetCellRange(sv, 5, 0, 1, 1)
	Dim ex As New FarPoint.Web.Spread.ExcelSparklineSetting()
	ex.ShowMarkers = True
	ex.ShowNegative = True
	ex.NegativeColor = Color.Red
	ex.SeriesColor = Color.Olive
	FpSpread1.Sheets(0) = sv
	FpSpread1.Sheets(0).RowCount = 6
	FpSpread1.Sheets(0).ColumnCount = 6
	sv.Cells(0, 0).Value = 2
	sv.Cells(0, 1).Value = 5
	sv.Cells(0, 2).Value = 4
	sv.Cells(0, 3).Value = -1
	sv.Cells(0, 4).Value = 3
	FpSpread1.Sheets(0).AddSparkline(data, data2, FarPoint.Web.Spread.SparklineType.Column, ex)

Tags: