차트는 데이터를 시각화하고 분석하는 데 사용할 수 있습니다. 경우에 따라 집계가 사용되는 차트에 요약된 데이터를 표시해야 합니다. WPF용 ComponentOne FlexChart에서 UI는 레거시 C1Chart와 달리 데이터 조작과 분리되어 제품의 성능을 향상합니다. 따라서 FlexChart에는 데이터 조작을 위한 기본 제공 기능이 없습니다.

이 주제에서는 WPF 차트 컨트롤 데이터를 집계하는 데 필요한 단계를 설명합니다. 마지막에 전체 샘플을 다운로드할 수 있습니다.

WPF 차트 집계

다음은 집계되지 않은 WPF 차트 컨트롤입니다.

일반적인 사용자 요구 사항은 분기별로 런타임에 데이터를 요약하는 것입니다. Sum 집계 유형은 모든 값을 함께 추가하며 차트는 각 분기에 대해 단일 막대를 표시합니다.

이 차트를 런타임 기능으로 만드는 작업의 좋은 점은 최종 사용자가 데이터를 보는 방법을 선택할 수 있다는 것입니다. 예를 들어 데이터를 연도별로 요약할 수 있습니다.

일반적으로 집계는 단순히 모든 값을 함께 합산하여 수행됩니다. 하지만 Average, Count, Min, Max를 포함하여 사용자가 분석할 수 있는 집계 유형은 더 많습니다. 아래 예시에서는 각 집계 그룹에 대해 찾은 최대값을 단순히 표시하는 "Max" 집계 유형을 사용합니다.

WPF용 FlexChart에서 Sum, Avg, Max, Min, Count와 같은 집계 기능을 달성하기 위해 코드 예시가 포함된 다음 섹션을 살펴보겠습니다.

모델 및 열거 만들기

이 런타임 기능을 가장 잘 만들기 위해 모델 및 열거형 클래스를 만들어 보겠습니다.
이렇게 하면 더 많은 양식으로 재사용할 수 있습니다.

FlexChart 데이터에 대해 모델 클래스를 만듭니다. 데이터 집합마다 다릅니다.

public class AggregateItem 
{
  public int Year { get; set; }
  public int Q { get; set; }
  public string M { get; set; }
  public double Value { get; set; }
}

집계 유형에 대한 열거를 만듭니다.

public enum AggregateType
{
   Sum,
   Avg,
   Max,
   Min,
   Count
}

집계 확장 만들기

다음으로, 데이터에 대한 AggregateType의 집계 기반을 수행하기 위해 집계에 대한 확장 메서드를 만듭니다. 확장 메서드를 통해 새로 파생된 유형을 만들지 않고 기존 유형에 메서드를 "추가"할 수 있습니다. 여기에서는 확장에 집계 메서드를 만들었습니다.

public static class AggregateExtensions
{
   public static double Aggregate(this IEnumerable<double> values, AggregateType type, Func<IEnumerable<double>, double> customFun = null)
   {
      if (customFun != null)
      {
          return customFun(values);
      }
      switch (type)
      {
      case AggregateType.Avg:
         return values.Average();
      case AggregateType.Sum:
         return values.Sum();
      case AggregateType.Max:
         return values.Max();
      case AggregateType.Min:
         return values.Min();
      case AggregateType.Count:
         return values.Count();
      default:
         return values.Sum();
      }
   }
}

FlexChart용 ViewModel 만들기

ViewModel은 View의 데이터 소스 역할을 하며 ViewModel을 통해 View를 제어할 수 있습니다. 보기에 바인딩할 수 있는 ViewModel에서 몇 가지 속성과 메서드를 만들어 두었습니다.

데이터 컬렉션의 경우에는 DataSource를 노출합니다. 일반적으로 View 및 ViewModel은 View에 속성 업데이트를 전달할 수 있도록 INotifyPropertyChanged를 구현합니다.

집계 속성이 업데이트될 때마다 Binding을 업데이트합니다.

public string AggregateProperty
        {
            get
            {
                return _aggregateProperty;
            }
            set
            {
                string key = value;
                if (string.IsNullOrEmpty(key))
                {
                    Bindings = null;
                }

                switch (key)
                {
                    case "Year":
                        Bindings = new string[] { "Year" };
                        break;
                    case "Quarter":
                        Bindings = new string[] { "Year", "Q" };
                        break;
                    default:
                        Bindings = null;
                        break;
                }
                _aggregateProperty = key;
                UpdateAggregation();
            }
        }

Binding, AggregateProperty, AggregateType을 기반으로 Aggregate DataSource를 업데이트합니다. 업데이트된 DataSource(FlexChart의 ItemsSource에 바인딩됨)는 FlexChart 보기를 반영합니다.

public void UpdateAggregation()
        {
            IEnumerable<object> src = this.Source as IEnumerable<object>;

            if (src == null)
            {
                return;
            }
            if (!src.Any())
            {
                return;
            }

            IEnumerable<KeyValuePair<string, double>> data;

            // Updating DataSource
            if (Bindings == null || Bindings.Length == 0)
            {
                data = from p in src
                       select new KeyValuePair<string, double>(GetValueKey(p, new string[] { "Year", "M" }), GetValue(p, "Value"));
               
            }
            else
            {
                var groupedData = src.GroupBy(k => GetValueKey(k, Bindings));
                data = from p in groupedData select new KeyValuePair<string, double>(GetValueKey(p.First(), Bindings).ToString(), (from k in p select GetValue(k, "Value")).Aggregate(AggregateType));
               
            }

            this.DataSource = data.ToArray();
            this.OnPropertyChanged("DataSource");
        }
        string GetValueKey(object obj, string[] keys)
        {
            string r = string.Empty;
            foreach (var key in keys)
            {
                switch (key)
                {
                    case "Q":
                        r += " Q" + GetValue(obj, key);
                        break;
                    case "M":
                        DateTime dt = new DateTime(1900, Convert.ToInt32(GetValue(obj, key)), 1);
                        r += " " + dt.ToString("MMM");
                        break;
                    default:
                        r += GetValue(obj, key);
                        break;
                }
            }
            return r;
        }

        protected static double GetValue(object obj, string binding)
        {
            var v = Convert.ToDouble(obj.GetType().GetProperty(binding).GetValue(obj, null));

            return v;
        }

FlexChart 만들기 및 XAML에서 ViewModel에 바인딩

마지막으로, View에서 볼 수 있도록 XAML에서 FlexChart를 만들어야 합니다.

가장 중요한 부분은 ViewModel과 View를 바인딩하는 것입니다. View의 DataContext 속성을 ViewModel의 인스턴스로 설정하여 완료할 수 있습니다.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:FlexChartAggregate"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="FlexChartAggregate.MainWindow"
        xmlns:ViewModel="clr-namespace:FlexChartAggregate.ViewModel"
        mc:Ignorable="d" WindowState="Maximized"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <ViewModel:AggregateViewModel/>
    </Window.DataContext>
    <Grid x:Name="grid">
        <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <StackPanel MinHeight="48" Grid.Row="0" Orientation="Horizontal">
            <ComboBox x:Name="cbProperty" Margin="5" MinWidth="120" Height="24" ItemsSource="{Binding AggregateProperties}" DisplayMemberPath="Key" SelectedValuePath="Value"  SelectedValue="{Binding AggregateProperty}"/>
                <ComboBox x:Name="cbTopNCount" Margin="5" MinWidth="120" Height="24" ItemsSource="{Binding AggregateTypes}"  DisplayMemberPath="Key" SelectedValuePath="Value"  SelectedValue="{Binding AggregateType}" SelectedIndex="0"/>
                <ComboBox x:Name="cbChartType" Margin="5" MinWidth="120" Height="24" ItemsSource="{Binding ChartTypes}"  DisplayMemberPath="Key" SelectedValuePath="Value"  SelectedValue="{Binding ChartType}" SelectedIndex="0"/>
            </StackPanel>
        <c1:C1FlexChart x:Name="flexChart1" Grid.Row="1"
                            Header="Sales data" BindingX="Key" LegendToggle="True"
                            ItemsSource="{Binding DataSource}" ChartType="{Binding ChartType}" >
            <c1:C1FlexChart.AxisX>
                <c1:Axis LabelAngle="45"/>
            </c1:C1FlexChart.AxisX>
            <c1:Series SeriesName="Value" Binding="Value"/>
            </c1:C1FlexChart>
    </Grid>
</Window>

이 작업은 C1Chart에서 마이그레이션하는 사람이나 FlexChart 사용자에게 유용합니다.

완전한 구현을 위해 샘플을 다운로드해 보세요!

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

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