WPF - Chart 구현하기

WPF에서 MSChart를 Window Form Host로 구현을 하기도 했었습니다.
Window Form을 WPF에 붙이다보니 여러모로 좋지 않더군요.
WPF 기반의 Chart인 LiveChart를 NuGet에서 설치 후 간단히 구현해보았습니다.

1. NuGet에서 LiveChart를 설치합니다.

 

2. XAML에 LiveChart를 넣습니다.
(1) XAML의 Namespace에 LiveChart를 추가합니다.

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

(2) Live Chart를 XAML에 추가합니다.

<lvc:CartesianChart/>

[XAML]

<Window x:Class="WpfChart.MainWindow"
	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:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
	xmlns:local="clr-namespace:WpfChart"
	mc:Ignorable="d"
	Title="MainWindow" Height="450" Width="800">
<Grid>
	<lvc:CartesianChart/>
</Grid>
</Window>

 

3. Chart 데이터 바인딩합니다.
(1) CS에 Chart의 Value값을 추가합니다.

using LiveCharts;
using System.Windows;

namespace WpfChart
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public ChartValues<float> Values { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            
            Values = Values = new ChartValues<float>
            {
                3, 4, 6, 3, 2, 6
            };

            DataContext = this;
        }
    }
}

(2) XAML의 LiveChart Series의 Values에 데이터를 바인딩합니다.

<Window x:Class="WpfChart.MainWindow"
        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:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:local="clr-namespace:WpfChart"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <lvc:CartesianChart>
            <lvc:CartesianChart.Series>
                <lvc:LineSeries Values="{Binding Values}"/>
            </lvc:CartesianChart.Series>
        </lvc:CartesianChart>
    </Grid>
</Window>

 

4. LiveChart를 실행한 결과입니다.