WPF Chart Control 사용해 보기(바, 파이, 꺽은석 차트 만들기)

WPF를 사용하는 이유중에 하나가 화려한 UI를 개발할 수 있다는 점이다. 웹 개발을 할때 Design(HTML) + Publish(Javascript)등을 이용을 합니다. WPF도 웹 개발과 동일하게 디자인(퍼블리쉬)와 로직 개발을 분리해서 할 수가 있습니다.

아래 그림을 보면 차트 그림이 좀 있어 보입니다. 제가 오늘 간단하게 만든 차트 프로그램입니다. 

XAML과 외부 차트 컨트롤 아래 예제는 (OpenSource)를 이용했습니다. 상용 버전을 사용하면 훨씬 더 멋있을 것입니다.

[Chart WPF 프로그램 만드는 방법]

1) WPF Tool Kit 설치

https://www.nuget.org/packages/WPFToolkit/

or

http://wpf.codeplex.com/releases/view/40535

[open source project]

https://github.com/xceedsoftware/wpftoolkit

2)프로젝트에 아래 2개 레퍼런스 추가

-WPFToolkit

-System.Windows.Controls.DataVisualization.Toolkit.dll

3) XAML에 Chart 과련 Assembly 추가

<Window x:Class="WpfChartDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:chartCtrl="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit”

 

        Title="MainWindow" Height="800" Width="800">

4) XAML에 Chart 관련 내용 추가

<ScrollViewer HorizontalScrollBarVisibility="Auto"

                  VerticalScrollBarVisibility="Auto">

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="1*"></ColumnDefinition>

                <ColumnDefinition Width="1*"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="262*"></RowDefinition>

                <RowDefinition Height="262*"></RowDefinition>

                <RowDefinition Height="262*"></RowDefinition>

            </Grid.RowDefinitions>

           

            <chartCtrl:Chart

                x:Name="xColumnChart" Title="Column Series Demo"

                Grid.Row="0" Grid.Column="0" >

                <chartCtrl:ColumnSeries Title="직원수"

                                        DependentValuePath="Value"

                                        IndependentValuePath="Key"

                                        ItemsSource="{Binding}" />               

            </chartCtrl:Chart>

 

            <chartCtrl:Chart

                x:Name="xPieChart" Title="Pie Series Demo"

                Grid.Row="0" Grid.Column="1" >

                <chartCtrl:PieSeries Title="직원수"

                                     DependentValuePath="Value"

                                     IndependentValuePath="Key"

                                     ItemsSource="{Binding}"

                                     IsSelectionEnabled="True" />

            </chartCtrl:Chart>

 

            <chartCtrl:Chart 

                x:Name="xAreaChart" Title="Area Series Demo"

                Grid.Row="1" Grid.Column="0">

                <chartCtrl:AreaSeries Title="직원수"

                                      DependentValuePath="Value"

                                      IndependentValuePath="Key"

                                      ItemsSource="{Binding}"

                                      IsSelectionEnabled="True"/>

            </chartCtrl:Chart>

           

            <chartCtrl:Chart 

                x:Name="xBarChart" Title="Bar Series Demo"

                       Grid.Row="1" Grid.Column="1">

                <chartCtrl:BarSeries Title="직원수" 

                                     DependentValuePath="Value"

                                     IndependentValuePath="Key"

                                     ItemsSource="{Binding}"

                                     IsSelectionEnabled="True"/>

            </chartCtrl:Chart>

           

            <chartCtrl:Chart

                x:Name="xLineChart" Title="Line Series Demo"

                       Grid.Row="2" Grid.Column="0">

                <chartCtrl:LineSeries Title="직원수"

                                      DependentValuePath="Value"

                                      IndependentValuePath="Key"

                                      ItemsSource="{Binding}"

                                      IsSelectionEnabled="True"/>

                </chartCtrl:Chart>

           

        </Grid>

    </ScrollViewer>

 

</Window>

5) C# 코드 CS에 차트 관련 로직 추가

  private void ShowColumnChart()

        {

            List<KeyValuePair<string, int>> valueList = new List<KeyValuePair<string, int>>();

            valueList.Add(new KeyValuePair<string, int>("개발자", 83));

            valueList.Add(new KeyValuePair<string, int>("기타", 17));

            valueList.Add(new KeyValuePair<string, int>("테스터", 36));

            valueList.Add(new KeyValuePair<string, int>("품질", 28));

            valueList.Add(new KeyValuePair<string, int>("관리자", 39));

 

            xColumnChart.DataContext = valueList;

 

            xPieChart.DataContext = valueList;

 

            xAreaChart.DataContext = valueList;

 

            xBarChart.DataContext = valueList;

 

            xLineChart.DataContext = valueList;

 

        }

출처 : 다년간의 프로그래밍 경험

참고 URL : http://www.c-sharpcorner.com/uploadfile/mahesh/charting-in-wpf/