WPF DevExpress BarChart Example

XAML에서 데이터 바인딩을 위해 ViewModel 패턴을 사용하여 구현해드리겠습니다:

// ChartDataViewModel.cs
public class ChartDataViewModel : INotifyPropertyChanged
{
    private ObservableCollection<ChartDataPoint> _chartData;
    public ObservableCollection<ChartDataPoint> ChartData
    {
        get => _chartData;
        set
        {
            _chartData = value;
            OnPropertyChanged(nameof(ChartData));
        }
    }

    public ChartDataViewModel()
    {
        ChartData = new ObservableCollection<ChartDataPoint>
        {
            new ChartDataPoint { Category = "Category A", Value = 150 },
            new ChartDataPoint { Category = "Category B", Value = 280 },
            new ChartDataPoint { Category = "Category C", Value = 200 },
            new ChartDataPoint { Category = "Category D", Value = 350 },
            new ChartDataPoint { Category = "Category E", Value = 180 }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class ChartDataPoint
{
    public string Category { get; set; }
    public double Value { get; set; }
}

<!-- MainWindow.xaml -->
<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        xmlns:local="clr-namespace:YourNamespace"
        Title="MainWindow" Height="450" Width="800">

    <Window.DataContext>
        <local:ChartDataViewModel/>
    </Window.DataContext>

    <dxc:ChartControl Background="Transparent" BorderThickness="0">
        <dxc:ChartControl.Legend>
            <dxc:Legend Position="RightOutside" />
        </dxc:ChartControl.Legend>

        <dxc:ChartControl.Diagram>
            <dxc:XYDiagram2D Background="Transparent">
                <dxc:XYDiagram2D.DefaultPane>
                    <dxc:Pane Background="Transparent">
                        <dxc:Pane.BorderThickness>
                            <Thickness>0</Thickness>
                        </dxc:Pane.BorderThickness>
                    </dxc:Pane>
                </dxc:XYDiagram2D.DefaultPane>

                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D Reverse="True" Visibility="Hidden"/>
                </dxc:XYDiagram2D.AxisX>

                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D Visibility="Hidden"/>
                </dxc:XYDiagram2D.AxisY>

                <dxc:XYDiagram2D.Series>
                    <dxc:BarSideBySideSeries2D 
                        DataSource="{Binding ChartData}"
                        ArgumentDataMember="Category"
                        ValueDataMember="Value"
                        DisplayName="Sales Data">
                        <dxc:BarSideBySideSeries2D.BarDistanceService>
                            <local:CustomBarWidthService barWidthInPixels="30"/>
                        </dxc:BarSideBySideSeries2D.BarDistanceService>
                    </dxc:BarSideBySideSeries2D>
                </dxc:XYDiagram2D.Series>
            </dxc:XYDiagram2D>
        </dxc:ChartControl.Diagram>
    </dxc:ChartControl>
</Window>

// MainWindow.xaml.cs
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

이렇게 하면:

1. ViewModel에서 데이터를 관리하고
2. XAML에서 직접 DataSource를 바인딩하며
3. 데이터가 변경될 때 자동으로 차트가 업데이트됩니다

데이터를 업데이트하려면 ViewModel에서:

public void UpdateData()
{
    ChartData.Add(new ChartDataPoint { Category = "New Category", Value = 250 });
    // 또는
    ChartData = new ObservableCollection<ChartDataPoint> { /* 새로운 데이터 */ };
}