차트는 데이터를 시각화하는 가장 편리하고 효율적인 방법입니다.

우리는 생활 가운데서 꺾은선형 차트, 열 차트, 원형 차트와 같은 차트를 자주 보고 사용하고 있습니다. 하지만 일반 차트는 필요한 것 이상으로 더 많은 정보를 전달합니다. 여기에서 스파크라인이 등장합니다.

스파크라인은 그래프에서 표시 중인 사항을 이해하는 데 걸리는 시간을 최소화하는 더욱 간단하고 간편한 데이터 시각화를 제공하는 작고 가벼운 차트입니다.

스파크라인은 시간이 지남에 따른 추세를 표시하는 데 주로 사용 되지만 꺾은선형 그래프에 표시할 수 있는 추세를 표시하는 데 사용할 수 있습니다. 시간에 따른 주식 추세, 날씨 추세 또는 생산율을 설명하는 데 자주 사용됩니다.

이 문서에서는 ComponentOne WPF Sparkline을 사용하여 ComponentOne WPF DataGrid(FlexGrid)에서 스파크라인을 표시하는 방법에 대해 살펴보겠습니다.

C1Sparkline 및 C1FlexGrid 설치

새 .NET 6 WPF 프로젝트를 만들고 C1.WPF.Grid & C1.WPF.Sparkline NuGet 패키지를 추가합니다.

NuGet 패키지가 프로젝트에 추가되면 다음 단계인 스파크라인 차트 만들기로 이동할 수 있습니다.

스파크라인 차트 만들기

데이터 소스에 바인딩

스파크라인의 데이터 소스로 사용될 데이터의 숫자 컬렉션을 표시하는 필드를 포함한 데이터 소스에 FlexGrid를 바인딩합니다. 예를 들면 Array, List 또는 ObservableCollection과 같은 IEnumerable 또는 INotifyCollectionChanged 인터페이스를 구현하는 필드입니다.

이 블로그에서는 다음 데이터 항목을 사용하겠습니다.

public class StockPriceData
{
       public string Name { get; private set; }
       public double InvestedAmount { get; private set; }
       public int Quantity { get; private set; }
       public double AverageBuyPrice { get; set; }
       public ObservableCollection<double> PriceData { get;} // To be used as sparklines data source
       public double CurrentAmount {get; set;}
       public double CurrentPrice {get; set;}
       public double Returns {get; set;}
}

더미 주식형 포트폴리오, 즉 다음과 같이 위의 데이터 항목(StockPriceData)의 컬렉션 정보를 포함한 데이터 소스에 그리드를 바인딩합니다.

<c1:FlexGrid x:Name="_stockDataGrid" ItemsSource="{Binding StockData}"></c1:FlexGrid>

이제 그리드가 적합한 데이터 소스에 바인딩 되었습니다. 따라서 다음 단계는 FlexGrid 열을 추가하고 구성하여 스파크라인을 표시하는 것입니다.

스파크라인 사용

C1Sparkline 컨트롤을 다양한 컨텍스트에서 데이터를 시각화하기 위해 세 개의 스파크라인 유형, 즉 꺾은선형, 열 및 승패를 지원합니다. 예를 들어, 꺾은선형 차트는 연속 데이터를 시각화하는 데 적합하여 열 스파크라인은 데이터 비교를 포함한 시나리오에서 사용합니다. 이와 유사하게 승패 스파크라인은 참-거짓(즉, 승-패) 시나리오를 시각화하기에 가장 잘 사용됩니다.

새 열을 추가하고 CellTemplate을 C1.WPF.Sparkline.C1Sparkline으로 설정한 다음 Data 속성을 다음과 같이 StockDataItem의 PriceData 속성에 바인딩합니다.

<c1:FlexGrid.Columns>
    <c1:GridColumn Binding="PriceData" Header="Stock Trend (Line)" Width="150" >
            <c1:GridColumn.CellTemplate>
                  <DataTemplate>
                        <c1:C1Sparkline Data="{Binding PriceData}" />
                  </DataTemplate>
            </c1:GridColumn.CellTemplate>
      </c1:GridColumn>
</c1:FlexGrid.Columns>

이 경우에는 연속 데이터(10초 동안의 주식 가격 데이터)가 있으므로 꺾은선형 스파크라인 유형을 사용합니다. 스파크라인 유형을 변경하기 위해 C1Sparkline의 SparklineType 속성을 Line으로 설정할 수 있습니다. 마커를 사용하여 스파크라인에서 개별 데이터 포인트를 강조 표시하여 더욱 읽기 쉽게 할 수 있습니다. 예를 들어, 스파크라인에서 가장 높고 가장 낮은 주식 가격 값을 강조 표시하려면 다음에 표시된 것처럼 Sparkline 클래스의 ShowHigh 및 ShowLow 속성을 설정합니다.

<c1:C1Sparkline Data="{Binding PriceData}" SparklineType="Line" ShowHigh="True" ShowLow="True"/>

스파크라인 스타일 지정

C1Sparkline은 다양한 스타일 지정 옵션을 제공하여 외형을 사용자 정의합니다. 예를 들어, 계열/축/데이터 포인트 색상, 계열 선 두께 등을 사용자 정의할 수 있습니다. 여기에서 더 자세한 내용을 확인하실 수 있습니다.

또한, 여기에서 샘플을 다운로드하실 수 있습니다.

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

• ComponentOne 공식 홈페이지
• ComponentOne 튜토리얼 및 샘플
• ComponentOne Q&A
• ComponentOne FAQ