53
WPF 애플리케이션에서 Syncfusion 차트를 사용해 데이터를 시각화하는 데 필요한 핵심 구성 요소를 포함하고 있습니다. 각각의 파일이 어떤 역할을 하는지 설명하겠습니다.
1. ChartViewModel
역할
- ViewModel 역할: 데이터 바인딩을 위해 사용됩니다. WPF의 MVVM(Model-View-ViewModel) 패턴에서
ViewModel은 데이터와 UI를 연결하는 중간 역할을 합니다. ObservableCollection을 사용하여 차트에 표시할 데이터를 동적으로 업데이트하거나 추가할 수 있습니다.
주요 코드
ObservableCollection<SalesInfo>:ObservableCollection은 컬렉션이 변경될 때(추가, 삭제 등) UI에 자동으로 업데이트를 반영하도록 지원합니다.SalesData속성은 차트에 표시할 데이터를 저장합니다.
- 데모 데이터 생성:
- 생성자에서
SalesInfo객체를 몇 개 생성하여SalesData에 추가합니다. - 각
SalesInfo객체는Category와Sales라는 두 개의 속성을 가집니다.
- 생성자에서
코드 분석
public class ChartViewModel
{
public ObservableCollection<SalesInfo> SalesData { get; set; }
public ChartViewModel()
{
// 데모 데이터 추가
SalesData = new ObservableCollection<SalesInfo>
{
new SalesInfo { Category = "Electronics", Sales = 15000 },
new SalesInfo { Category = "Groceries", Sales = 12000 },
new SalesInfo { Category = "Clothing", Sales = 8000 },
new SalesInfo { Category = "Furniture", Sales = 10000 }
};
}
}
public class SalesInfo
{
public string Category { get; set; }
public double Sales { get; set; }
}요약
ChartViewModel은 차트 데이터 소스로 사용됩니다.SalesData는 차트에서 카테고리와 매출 데이터를 시각화하기 위한 컬렉션입니다.
2. ChartWindow
역할
- WPF의 창(Window) 역할을 하며, Syncfusion 차트를 포함합니다.
ChartViewModel을DataContext로 설정하여 UI(XAML)와 데이터를 연결합니다.
주요 코드
DataContext설정:DataContext는 WPF에서 데이터 바인딩의 기본 소스입니다.ChartWindow의DataContext를ChartViewModel로 설정하여 차트가SalesData를 바인딩하고 렌더링할 수 있도록 만듭니다.
- XAML과 상호작용:
InitializeComponent는 XAML 파일(ChartWindow.xaml)의 UI를 초기화합니다.- 이 코드 덕분에 창이 열릴 때 Syncfusion 차트가 초기화되고, ViewModel의 데이터를 렌더링합니다.
코드 분석
public partial class ChartWindow : Window
{
public ChartWindow()
{
InitializeComponent();
DataContext = new ChartViewModel(); // ViewModel을 DataContext로 설정
}
}요약
ChartWindow는 WPF 창에서 Syncfusion 차트를 포함하는 역할을 합니다.DataContext를 통해 차트와 데이터를 연결합니다.
3. ChartWindow와 ChartViewModel의 연계
이 두 파일은 WPF의 MVVM 패턴에 따라 작성되었습니다. ChartWindow는 View의 역할을 하고, ChartViewModel은 데이터를 제공합니다.
- 역할 분리:
ChartWindow.xaml과ChartWindow.xaml.cs는 UI와 UI 동작을 정의합니다.ChartViewModel은 데이터를 정의하고, UI에 제공하는 역할을 합니다.
- 데이터 바인딩:
- Syncfusion 차트는 XAML에서
SalesData를ItemsSource로 설정하여 데이터 바인딩을 수행합니다. - 이를 통해 코드에서 직접 차트를 수정할 필요 없이 데이터만 업데이트하면 UI가 자동으로 변경됩니다.
- Syncfusion 차트는 XAML에서
전체 구성의 동작 방식
ChartWindow가 실행될 때 XAML이 초기화됩니다.ChartViewModel이DataContext로 설정됩니다.SalesData가 Syncfusion 차트의 데이터 소스로 사용됩니다.- 차트는 각 카테고리(
Category)와 매출(Sales) 데이터를 X축과 Y축에 매핑하여 렌더링합니다.
전체 코드
ChartViewModel.cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace SynfusionWpfApp
{
public class ChartViewModel
{
public ObservableCollection<SalesInfo> SalesData { get; set; }
public ChartViewModel ()
{
// 데모 데이터 추가
SalesData = new ObservableCollection<SalesInfo>
{
new SalesInfo { Category = "Electronics", Sales = 15000 },
new SalesInfo { Category = "Groceries", Sales = 12000 },
new SalesInfo { Category = "Clothing", Sales = 8000 },
new SalesInfo { Category = "Furniture", Sales = 10000 }
};
}
}
public class SalesInfo
{
public string Category { get; set; }
public double Sales { get; set; }
}
}ChartView.xaml.cs
using SyncfusionMapExample;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace SynfusionWpfApp
{
/// <summary>
/// ChartWindow.xaml에 대한 상호 작용 논리
/// </summary>
public partial class ChartWindow : Window
{
public ChartWindow ()
{
InitializeComponent();
DataContext = new ChartViewModel(); // ViewModel을 DataContext로 설정
}
}
}ChartView.xaml
using SyncfusionMapExample;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace SynfusionWpfApp
{
/// <summary>
/// ChartWindow.xaml에 대한 상호 작용 논리
/// </summary>
public partial class ChartWindow : Window
{
public ChartWindow ()
{
InitializeComponent();
DataContext = new ChartViewModel(); // ViewModel을 DataContext로 설정
}
}
}실행 사진
