WPF Toolkit June 2009 Pie Chart

★━─…WPF/WPF 2010. 1. 19. 22:20

WPF 응용프로그램의 차트를 보고 참 매력적이라고 생각했다. 윈폼에서 조차도 차트를 그리려면 노가다를 해야 했고, 상용 컴포넌트도 그리 화려하지 않았던 기억이 있다. WPF Toolkit June 2009 컴포넌트를 이용하면 쉽게 차트를 그릴 수 있다. 외국 블로그 자료를 참조했다.

WPF Toolkit June 2009 Pie Chart

원문

Pie Chart in WPF

WPF ToolKit June 2009 에는 WPF 에서 차트 기능을 갖는 System.Windows.Controls.DataVisualization.Toolkit.dll 이 포함되어 있다.

Install WPF Toolkit June 2009

링크를 참조하여 다운로드 및 설치 하자 WPF Toolkit - Release: WPF Toolkit June 2009
설치 하는데 특별한 설정은 없다. 이 toolkit 이 다음 WPF 확장 버전에 포함된다고 하는데, 그렇다면 라이센스 문제는 없겠지?!

Adding WPF Toolkit Reference

설치가 완료 하였다면 프로젝트에서 툴킷을 사용해 보자. 툴킷의 기능을 사용하기 위해서는 프로젝트에 툴킷 어셈블리를 참조 추가 시켜야 한다.

솔루션 탐색기에서 "참조" 항목에서 마우스 오른쪽 버튼으로 클릭 후 "참조 추가" 를 선택한다.

브라우저 탭을 선택한 후 툴킷이 설치된 폴더로 이동하자. 보통 툴킷이 설치된 경로는 다음과 같다.
C:\Program Files\WPF Toolkit\v3.5.40619.1\
폴더에서 System.Windows.Contorls.DataVisualization.Toolkit.dll 을 선택하여 참조 추가 시킨다.

다음으로 다음 두 네임스페이스를 xmal 페이지에 불러온다.
System.Windows.Controls.DataVisualization.Charting
System.Windows.Controls.DataVisualization.toolkit

xaml 페이지에서 "xmlns= " 을 입력하면 인텔리센스의 도움으로 쉽게 추가시킬 수 있다.
네임스페이스의 이름은 사용자 임의로 작성할 수 있다. 위에서는 DV, DVC 라고 졌는데 아마 DataVisualization 의 앞글자만 딴 듯?! DVC 에서 C 는 Chart 를 의미하겠고?! 후후후

xaml 페이지에서 DVC 라고 치면 차트와 관련된 엘리먼트들을 볼 수 있다.

Creating Chart

차트를 만들 준비가 되었으니 본격적으로 만들어 보자. 일단, 차트의 틀을 만들어 보자.
Chart 엘리먼트는 xaml 에서 WPF Chart 컨트롤을 나타낸다.

< DVC:Chart></DVC:Chart>

아래의 코드 조각은 Chart 컨트롤을 선언 하여 컨트롤 변수의 이름 및 너비, 높이, 배경색, 전경색, 타이틀 이름, 범례 이름 프로퍼티를 설정한다. 각 프로퍼티의 의미는 출력 모습을 보면 짐작할 수 있다.

<DVC:Chart Name="mcChart" Width="400" Height="250"
Background="YellowGreen" Foreground="DarkBlue"
Title="Area Chart" LegendTitle="Month Rating" />

Chart Type

Chart 엘리먼트의 Series 어트리뷰트를 사용하여 차트 타입을 생성한다. BarSeries, ColumnSeries, LineSeries, PieSeries, AreaSeries, ScatterSeries 를 만들 수 있다.

Pie Chart

아래의 코드는 Chart 엘리먼트의 Series 어트리뷰트를 PieSeries 로 설정하여 Pie Chart 를 생성한다. data source 의 Key, Value 필드를 바인딩 시켜주었다.

<DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart"
           Width="400" Height="250" Background="LightSteelBlue">
    <DVC:Chart.Series>
        <DVC:PieSeries Title="Experience"
                       IndependentValueBinding="{Binding Path=Key}"
                       DependentValueBinding="{Binding Path=Value}">
        </DVC:PieSeries>
    </DVC:Chart.Series>
</DVC:Chart>

아래의 코드는 KeyValuePair 컬렉션을 생성하여 Chart Series 의 ItemSource 프로퍼티에 설정한다. 생성한 컬렉션은 다른 차트에서도 재사용 할 수 있다.

private void LoadPieChartData()
{
    ((PieSeries)mcChart.Series[0]).ItemsSource =
        new KeyValuePair<string, int>[]{
            new KeyValuePair<string, int>("Project Manager", 12),
            new KeyValuePair<string, int>("CEO", 25),
            new KeyValuePair<string, int>("Software Engg.", 5),
            new KeyValuePair<string, int>("Team Leader", 6),
            new KeyValuePair<string, int>("Project Leader", 10),
            new KeyValuePair<string, int>("Developer", 4) };
}

출력된 모습은 다음과 같다.

Generating Chart from a Collection

컬렉션으로 부터 Pie Chart 를 그릴 수 있다. 우선 Fruit 라는 클래스를 정의한다.

class Fruit
{
public string Name { get; set; }
public Int16 Share { get; set; }
}

FruitCollection 클래스는 생성자에서 Fruit 객체를 추가한다.

class FruitCollection : System.Collections.ObjectModel.Collection<Fruit>
{
    public FruitCollection()
    {
        Add(new Fruit { Name = "Mango", Share = 10 });
        Add(new Fruit { Name = "Banana", Share = 36 });
        Add(new Fruit { Name = "Apple", Share = 24 });
        Add(new Fruit { Name = "Guava", Share = 4 });
        Add(new Fruit { Name = "Orange", Share = 12 });
        Add(new Fruit { Name = "Pear", Share = 10 });
        Add(new Fruit { Name = "Pineapple", Share = 4 });
    }
}

xaml 코드에서 FruitCollection 을 호출하는 리소스를 추가하고, ItempSource 프로퍼티를 사용하여 PieSeries 에 FruitCollection 을 바인딩 시켰다.

<Grid.Resources>
    <local:FruitCollection x:Key="FruitCollection" />
</Grid.Resources>

<DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart"
           Width="400" Height="250"
           Background="LightSteelBlue">
    <DVC:Chart.Series>
        <DVC:PieSeries Title="Experience"
                       ItemsSource="{StaticResource FruitCollection}"
                       IndependentValueBinding="{Binding Path=Name}"
                       DependentValueBinding="{Binding Path=Share}">
       </DVC:PieSeries>
    </DVC:Chart.Series>
</DVC:Chart>