.NET C# 앱에서 동적 WPF 차트를 만드는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2023-05-11 09:51 조회 1,002회 댓글 0건

본문

관련링크

데이터를 시각화하는 것은 사용자에게 공통적으로 필요한 일입니다. 예를 들어, 데이터는 표/그리드 형식 또는 그래픽 표현과 같이 다양한 형식으로 시각화할 수 있습니다.

ComponentOne FlexGrid는 표/그리드 형식으로 데이터를 시각화하는 데 사용되며 FlexChart는 데이터를 그래픽으로 표현한 것입니다. FlexGrid와 FlexChart를 데이터에 동기화하여 모든 변경 사항에 대한 동적 업데이트를 확인할 수 있습니다.

WPF 및 C# 차트

이 블로그에서는 FlexChart를 FlexGrid에 연결하여 Microsoft Excel과 유사한 바인딩된 MVVM(Model-View-ViewModel) 시나리오를 만드는 방법을 보여 줍니다. 사용자는 FlexGrid에서 항목을 추가, 삭제 및 수정할 수 있으며 이는 FlexChart에 반영됩니다.

동적 WPF 차트를 만드는 단계

Model 및 viewModel 만들기

데이터에 따라 모델 클래스를 생성하고, INotifyPropertyChanged 인터페이스를 구현하여 속성 값이 변경될 때 알림을 보냅니다. 이는 FlexGrid에서 데이터가 변경될 때 View(FlexChart도 포함)에서 알림을 받기 위한 핵심 단계입니다.

  public class Country : INotifyPropertyChanged
  {
       private string _name;
       public string Name
      {
           get { return _name; }
           set { _name = value; OnPropertyRaised("Name"); }
      }
       
       private int _sales;
       public int Sales
      {
           get { return _sales; }
           set { _sales = value; OnPropertyRaised("Sales"); }
      }

       private int _downloads;
       public int Downloads
      {
           get { return _downloads; }
           set { _downloads = value; OnPropertyRaised("Downloads"); }
      }

       public event PropertyChangedEventHandler PropertyChanged;
       public void OnPropertyRaised(string property)
      {
           if(PropertyChanged != null)
               PropertyChanged(this, new PropertyChangedEventArgs(property));
      }
  }

이제 View에 연결할 DataViewModel이라는 ViewModel을 만듭니다. View에 바인딩할 수 있는 ViewModel에서 몇 가지 속성과 메서드를 만들 수 있습니다.

   public class DataViewModel
  {
       private ObservableCollection<Country> _countries;

       public ObservableCollection<Country> Countries
      {
           get { return _countries; }
           set { _countries = value; }
      }

       private string _desc;

       public string Desc
      {
           get { return _desc; }
           set { _desc = value; }
      }

       /// <summary>
       /// C'tor
       /// </summary>
       public DataViewModel()
      {
           //create a dummy data
           var country = new string[] { "China", "India", "Japan", "US" };
           var count = country.Length;
           Countries = new ObservableCollection<Country>();
           var rnd = new Random();
           for (var i = 0; i < count; i++)
               Countries.Add(new Country()
              {
                   Name = country[i],
                   Sales = 1 + rnd.Next(100,1000),
                  Downloads  = 1 + rnd.Next(100, 1000),
              });
           Desc = "You can modify, add or delete Flexgrid's item and this will reflect on FlexChart.";
      }
  }

View 만들기

이제 사용자 인터페이스(View)를 만들 차례입니다. ItemsSources 및 각각의 속성에 바인딩된 C1FlexChart 및 C1FlexGrid를 View에 추가합니다.

<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:DynamicFlexChart"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="DynamicFlexChart.MainWindow"
        xmlns:vm ="clr-namespace:DynamicFlexChart.ViewModel"
        mc:Ignorable="d"
        Title="Dynamic FlexChart" Height="450" Width="800">
    <Window.DataContext>
        <vm:DataViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="desc" Text="{Binding Desc}" FontSize="14" TextWrapping="Wrap" Margin="10,0,0,0"/>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            
            <!-- FlexGrid -->
            <c1:C1FlexGrid x:Name="flexGrid" ItemsSource="{Binding Countries}" AllowAddNew="True" KeyDown="Key_Down" AutoGenerateColumns="False">
                <c1:C1FlexGrid.Columns>
                    <c1:Column Header="Name" Binding="{Binding Name}"/>
                    <c1:Column Header="Sales" Binding="{Binding Sales}"/>
                    <c1:Column Header="Downloads" Binding="{Binding Downloads}"/>
                </c1:C1FlexGrid.Columns>
            </c1:C1FlexGrid>

            <!-- FlexChart -->
            <c1:C1FlexChart x:Name="flexChart" Grid.Column="1" ItemsSource="{Binding Countries}" BindingX="Name" LegendPosition="Bottom">
                <c1:C1FlexChart.Series>
                    <c1:Series Binding="Sales" SeriesName="Sales"/>
                    <c1:Series Binding="Downloads" SeriesName="Downloads"/>
                </c1:C1FlexChart.Series>
                <c1:C1FlexChart.DataLabel>
                    <c1:DataLabel Content=" {value}" Position="Top"/>
                </c1:C1FlexChart.DataLabel>
            </c1:C1FlexChart>
        </Grid>                
    </Grid>
</Window>

이제 FlexGrid에서 데이터를 편집, 추가 또는 제거할 수 있으며 FlexChart에 동적으로 업데이트됩니다.

구현을 위한 샘플을 다운로드할 수 있으니, 시도해 보시길 바랍니다.