! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

[WinForms] 스파크라인 > 온라인 스터디

본문 바로가기

Spread.NET

온라인 스터디

7. 데이터 시각화 [WinForms] 스파크라인

페이지 정보

작성자 GrapeCity 작성일 2021-10-26 17:06 조회 1,128회 댓글 0건

본문

Spread.NET에서는 Excel과 호환되는 2D 및 3D의 다양한 차트, 스파크라인, 사용자 정의 시각화 기능을 통해 사용자들에게 더욱 향상된 데이터 시각화 솔루션을 제공할 수 있습니다. 이번 글에서는 데이터 시각화를 위한 스파크라인을 생성하고 사용자 정의하는 방법을 살펴보겠습니다. 



 

스파크라인은 셀 안에 그려 넣는 미니 차트로, 데이터의 추세를 시각화하여 나타내는 데 사용됩니다. Spread.NET에서는 열형(Column), 꺾은선형(Line) 및 승패형(Winloss) 스파크라인을 지원하며, Excel 2010 버전 이상과 호환됩니다. 스파크라인은 동일한 스프레드시트 내에 존재하는 하나의 열 또는 행 데이터에 대해서만 생성 가능합니다.

다음 이미지는 최소축 -9, 최대축 15를 기준으로 생성되었습니다.


 



스파크라인 생성하기 


셀에 스파크라인을 추가하는 방법으로는 코드를 사용하는 방법과 스프레드 디자이너를 사용하는 방법이 있습니다. 본문에서는 셀에 열 스파크라인(Column Sparkline)을 만들고 색상을 설정해 보겠습니다.

  • 코드를 사용하는 방법

    1. 셀에 데이터를 입력합니다.

      /** 스프레드 시트에 데이터 삽입**/
      SheetView sheet = fpSpread1.ActiveSheet;
      sheet.Cells[0, 0].Value = 2;
      sheet.Cells[1, 0].Value = 5;
      sheet.Cells[2, 0].Value = 4;
      sheet.Cells[3, 0].Value = -1;
      sheet.Cells[4, 0].Value = 3;

    2. 데이터의 셀 범위를 설정합니다.

      // 스파크라인을 생성할 데이터 영역 설정 [A1:A5]
      SheetCellRange dataRange = new SheetCellRange(sheet, 0, 0, 5, 1);

    3. 스파크라인을 삽입할 셀을 지정합니다.

      // 스파크라인을 삽입할 셀 위치 설정 [A6]
      SheetCellRange sparklineRange = new FarPoint.Win.Spread.Chart.SheetCellRange(sheet, 5, 0, 1, 1);

    4. 스파크라인에 대한 속성(마커, 색상 등)을 설정합니다.

      열 또는 승패 스파크라인에서 SeriesColor 속성은 막대의 기본 색상을 의미합니다. 꺾은선형 스파크라인에서 SeriesColor 속성은 선의 색상을 설정할 때 사용합니다.

      /** 스파크라인 설정 **/
      ExcelSparklineSetting ess = new ExcelSparklineSetting();
      // 음수 데이터를 다르게 표시할지 여부 설정
      ess.ShowNegative = true;
      // 음수 데이터 색상 설정(빨간색)
      ess.NegativeColor = Color.Red;
      // 계열 색상 설정
      ess.SeriesColor = Color.Blue;

    5. SheetView.AddSparkline 메소드로 셀 영역에 스파크라인을 추가합니다. 예시에서 사용한 AddSparkline 메소드의 인자는 다음과 같으며, 이밖에도 2개의 오버로드 된 메소드가 있습니다.

      • SheetCellRange data : 스파크라인으로 표현할 데이터 영역을 설정합니다.

      • CellRange location : 스파크라인이 삽입될 셀 영역을 설정합니다.

      • SparklineType type : 스파크라인 타입을 설정합니다. (열, 꺾은선, 승패)

      • ExcelSparklineSetting setting : 스파크라인에 대한 속성을 설정합니다.

      // 스파크라인 삽입
      sheet.AddSparkline(dataRange, sparklineRange, SparklineType.Column, ess);
    6. 코드를 실행하면, A6 셀에 열형 스파크라인이 생성된 것을 확인할 수 있습니다. 세로막대의 기본 색상은 파란색이지만, 음수값을 갖는 네번째 막대는 빨간색으로 표시됩니다.



    Sparkline - 샘플 다운로드

  • 디자이너를 사용하는 방법

    1. 도구상자에서 fpSpread를 선택하여 Form을 추가합니다. 스프레드-우클릭-Spread Designer를 클릭하여 디자이너를 실행합니다.



    2. 디자이너에서 셀에 데이터를 입력합니다.



    3. 스파크라인을 삽입할 셀을 선택합니다. 메뉴에서 삽입 - 열 스파크라인을 선택합니다.



    4. 스파크라인 편집 대화 상자에서 데이터 범위를 설정합니다. 포인터를 사용하여 셀 영역을 선택하여 범위를 설정할 수도 있습니다.



    5. 확인을 클릭하면, 다음과 같이 A6 셀에 스파크라인이 생성되어 있습니다.



    6. 파일 탭 - 적용 및 종료를 선택하여 변경 사항을 저장하고 디자이너를 닫습니다. 실행하면 다음과 같은 결과를 확인할 수 있습니다.


       



 

스파크라인 속성

스파크라인의 속성에는 다음과 같은 내용이 포함됩니다. 더 자세한 스파크라인 설정 속성을 알고 싶다면 도움말을 참고해주시기 바랍니다.

  • X축(수평 축)

  • Y축(수직 축)

  • 마커

  • 포인트

X축(수평축)

X축(수평축)은 일반형 날짜형으로 구분됩니다.

일반형은 모든 점이 축을 따라 동일한 거리에 그려집니다. 날짜형은 그려지는 점을 지정하며 날짜 단위에 따라 점 사이의 거리가 다를 수 있습니다.

다음의 예시에서는 1월 2일, 3일, 5일의 데이터가 포함되어 있습니다. DateAxis 속성을 true로 설정하면 날짜형 수평축이 적용되고, 셀 D4의 스파크라인에서 4일에 대한 데이터가 들어갈 자리가 비워져있는 것을 확인할 수 있습니다.

  • 일반형(DateAxis = false)



  • 날짜형(DateAxis = true)


     


// 스파크라인 설정을 위한 객체 생성
ExcelSparklineSetting ess1 = new ExcelSparklineSetting();
​
// 날짜형 수평축 설정
ess1.DateAxis = true;
// 날짜 범위 설정
ess1.Formula = "sheet1!A1:C1";
​
// 데이터 입력
sheet.Cells[0, 0].Text = "2021/01/02";
sheet.Cells[0, 1].Text = "2021/01/03";
sheet.Cells[0, 2].Text = "2021/01/05";
sheet.Cells[1, 0].Value = 2;
sheet.Cells[1, 1].Value = 11;
sheet.Cells[1, 2].Value = 4;
​
// 텍스트 셀 너비 조정
sheet.Columns[0].Width = sheet.Columns[0].GetPreferredWidth();
sheet.Columns[1].Width = sheet.Columns[1].GetPreferredWidth();
sheet.Columns[2].Width = sheet.Columns[2].GetPreferredWidth();
​
// 스파크라인 추가
sheet.AddSparkline("sheet1!$A$2:$C$2", "sheet1!D2", SparklineType.Column, ess1);
 


Y축(수직축)

스파크라인의 Y축(수직축) 최소값과 최대값을 설정하는 방법에는 세 가지 옵션이 존재합니다. 옵션은 MinAixsType 또는 MaxAixsType에서 설정할 수 있습니다.

  • MaxAxisType: 스파크라인 그룹의 스파크라인에 대한 세로축 최대값을 계산하는 옵션을 설정합니다. 3가지 옵션이 존재합니다.

    • Individual : 스파크라인 그룹의 각 스파크라인에 대한 수직축 최대값이 자동으로 계산되어, 최대값이 있는 데이터 포인트가 플롯 영역에 표시될 수 있도록 지정합니다.

    • Group : 수직축 최대값이 이 스파크라인 그룹의 모든 스파크라인에서 공유되도록 지정하고, 최대값이 있는 데이터 포인트가 플롯영역에 표시될 수 있도록 자동으로 계산됩니다.

    • Custom : 스파크라인 그룹의 각 스파크라인에 대한 수직축 최대값을 스파크라인 그룹의 manualMax 속성 값으로 설정합니다.

  • ManualMax : 스파크라인 그룹의 모든 스파크라인에서 공유되는 세로 축의 최대값을 설정합니다. MaxAxisType이 Custom일 때 사용합니다.

  • MinAxisType : 스파크라인 그룹의 스파크라인에 대한 수직축 최소값을 계산하는 옵션을 설정합니다. 3가지 옵션이 존재합니다.

    • Individual : 스파크라인 그룹의 각 스파크라인에 대한 수직 축 최소값이 자동으로 계산되어, 최소값이 있는 데이터 포인트가 플롯 영역에 표시될 수 있도록 지정합니다.

    • Group : 수직축 최소값이 이 스파크라인 그룹의 모든 스파크라인에서 공유되도록 지정하고, 최소값이 있는 데이터 포인트가 플롯영역에 표시될 수 있도록 자동으로 계산됩니다.

    • Custom : 스파크라인 그룹의 각 스파크라인에 대한 수직축 최소값을 스파크라인 그룹의 manualMin 속성 값으로 설정합니다.

  • ManualMin : 스파크라인 그룹의 모든 스파크라인에서 공유되는 세로 축의 최소값을 설정합니다. MinAxisType이 Custom일 때 사용합니다.

만약 MaxAxisType이 Custom으로 설정되어 있을 때, 수직 축의 최대값을 넘어간 선 또는 열 막대는 플롯 영역에서 잘려나갑니다. 다음 샘플에서는 수직축의 최댓값을 10으로 설정하였습니다. 셀 B2의 값이 15로, 수직축의 최댓값보다 크기 때문에 D2와 E2에서 스파크라인의 일부가 잘려 보이지 않는 것을 확인할 수 있습니다.


 

스파크라인 수직축 최대값 설정 - 샘플 다운로드



 

마커와 포인트

스파크라인에서 마커나 포인트를 표시할 수 있으며, 최소값, 음수값, 최대값, 첫번째 값과 마지막 값에 각기 다른 색상을 지정할 수 있습니다. 다음 예시에서는 다양한 속성값을 사용하여 열형 스파크라인과 꺾은선 스파크라인의 마커 색상을 다르게 지정했습니다.


 

// 스파크라인 마커 색상 설정
ess1.SeriesColor = Color.Gray;
ess1.MarkersColor = Color.Aquamarine;
ess1.FirstMarkerColor = Color.Blue;
ess1.HighMarkerColor = Color.DarkGreen;
ess1.LowMarkerColor = Color.Red;
ess1.LastMarkerColor = Color.Orange;
ess1.ShowMarkers = true;
ess1.ShowFirst = true;
ess1.ShowHigh = true;
ess1.ShowLow = true;
ess1.ShowLast = true;


스파크라인 색상 설정 - 샘플 다운로드


SeriesColor 속성은 열형 스파크라인의 막대 색상과 꺾은선형 스파크라인의 선 색상을 변경하는 데 사용됩니다. 위의 예시에서는 F2 셀의 세번째 막대 색상(최소/최대값도 아니고, 처음과 끝값에 해당하지 않는 막대)과 G2 셀의 선 색상이 회색(Gray)으로 표현되고 있습니다.

MarkersColor 속성은 오직 꺾은선형 스파크라인에서만 사용할 수 있습니다. 위 예시에서 최소/최대값도 아니고, 처음과 끝값에 해당하지 않는 세번째 마커에 아쿠아마린(Aquamarine) 색상이 적용되었습니다.



 

사용자정의 스파크라인

기본적으로 스파크라인은 스파크라인을 삽입할 스프레드시트 내에 존재하는 하나의 열 또는 행 값에 대해서 생성할 수 있습니다. 그러나 다음 예시와 같이 다른 시트에서 데이터를 가져와 사용자정의 스파크라인을 생성할 수도 있습니다. 아래 코드를 사용하여 사용자정의 스파크라인을 정의하고 생성해봅시다.

  1. ExcelSparkline을 상속받는 사용자 정의 클래스를 정의합니다. ExcelSparkline에서 수식으로 데이터 소스 영역을 설정하는 것과 달리, CustomExcelSparkine은 SheetView를 데이터 소스로 사용합니다.

    class CustomExcelSparkline : ExcelSparkline
    {
      CellRangeSegmentData innerData;
    
      // 시트 셀 범위를 나타내는 수식(formular) 대신 SheetView를 데이터 소스로 사용
      public CustomExcelSparkline(int row, int column, SheetView source)
      : base(row, column, string.Empty)
      {
       innerData = new CellRangeSegmentData(source, 0, 0, source.RowCount, source.ColumnCount, null);
      }
    ​
      public override object GetSparkLineData()
      {
       return innerData;
      }
    }

  2. 사용자 정의 클래스를 사용하여 스파크라인을 생성합니다. 아래 예제에서는 [A1:A3]에 순차적으로 열형, 꺾은선형, 승패형 스파크라인을 생성했습니다.

    public Form1()
    {
      // 컴포넌트 초기화 및 사이즈 조정
      InitializeComponent();
      fpSpread1.Dock = DockStyle.Fill;
    ​
      // 시트에 입력할 데이터 초기화
      List<Double> dlist = new List<double>();
      dlist.Add(-1.5);
      dlist.Add(4.5);
      dlist.Add(4.8);
      dlist.Add(5.5);
      dlist.Add(6.0);
      dlist.Add(10.5);
    ​
      // 데이터소스 시트 설정
      SheetView sv = new SheetView();
      sv.Visible = true;
      sv.SheetName = "DataSource";
      sv.DataSource = dlist;
      fpSpread1.Sheets.Add(sv);
    ​
      // 스파크라인 생성할 시트 초기화
      for (int r = 0; r < 3; r++)
      {
          // 스파크라인 유형 설정
          SparklineType type = SparklineType.Column;
          if (r % 3 == 1)
          type = SparklineType.Line;
          else if (r % 3 == 2)
          type = SparklineType.Winloss;
    ​
          ExcelSparklineGroup esg = new ExcelSparklineGroup(new ExcelSparklineSetting(), type);
    ​
          // [r,0] 셀에 사용자정의 스파크라인 삽입
          CustomExcelSparkline es = new CustomExcelSparkline(r, 0, sv);
          esg.Add(es);
    ​
          fpSpread1.Sheets[0].SparklineContainer.Add(esg);
      }
    }

  3. 실행 시, 'DataSource' 시트에 있는 데이터를 이용하여 'Spread1' 시트에 생성된 스파크라인을 확인하실 수 있습니다.



    샘플을 다운로드하여 전체 코드를 확인해 보실 수 있습니다.

    사용자정의 스파크라인 - 샘플 다운로드




지금 바로 Spread.NET을 다운로드하여 직접 테스트해보세요!

spnet.png

 

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.