WPF Datagrid 응용 프로그램에서 스파크라인을 표시하는 방법

차트는 데이터를 시각화하는 가장 편리하고 효율적인 방법입니다. 우리 모두는 삶의 어느 시점에서 차트를 보거나 사용한 적이 있습니다. 예를 들어 라인 차트, 세로 막대형 차트, 파이 차트 등이 있습니다. 그러나 때때로 전통적인 차트는 필요 이상으로 많은 정보를 전달합니다. 여기에서 스파크라인이 등장합니다.

스파크라인은 그래프에 표시되는 내용을 이해하는 데 걸리는 시간을 최소화하는 훨씬 간단하고 간결한 데이터 시각화를 제공하는 작고 가벼운 차트입니다.

스파크라인은 일반적으로 시간 경과에 따른 추세를 표시하는 데 사용되지만 선 그래프에 표시할 수 있는 모든 추세를 표시하는 데 사용할 수 있습니다. 시간 경과에 따른 재고 동향, 날씨 동향 또는 생산률을 설명하는 데 자주 사용됩니다.

이 기사에서는 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 속성을 true로 설정합니다.

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

스파크라인 스타일링

C1Sparkline은 모양을 사용자 지정할 수 있는 다양한 스타일 옵션을 제공합니다. 예를 들어 계열/축/데이터 포인트 색상, 계열 선 두께 등을 사용자 지정할 수 있습니다. here에서 동일한 내용을 참조하십시오.

샘플을 다운로드합니다.