Автор: Махеш Чанд (Mahesh Chand)

В этом руководстве показывается, как рисовать разные диаграммы, в том числе графики, линейчатые диаграммы, гистограммы, диаграммы с областями, точечные диаграммы и круговые диаграммы, с помощью WPF и C#.

Построение диаграмм в WPF

Набор средств WPF, выпущенный в июне 2009 года, поставляется со сборкой визуализации данных с именем System.Windows.Controls.DataVisualization.Toolkit.dll, в которой размещается функциональность для построения диаграмм в WPF. В этой статье показывается, как рисовать диаграммы с помощью набора средств WPF.

Примечание. Эта статья написана с использованием набора средств WPF, выпущенного в июне 2009 года, который можно загрузить здесь: Набор средств WPF - выпуск: набор средств WPF июнь 2009 г. Этот набор средств может стать частью WPF в ближайшем будущем.

Добавление ссылки на набор средств WPF

Прежде чем использовать в приложении WPF какую-либо функциональность, связанную с созданием диаграмм, необходимо загрузить набор средств WPF. Затем следует добавить ссылку на сборку.

Чтобы добавить ссылку, щелкните правой кнопкой мыши папку References проекта в обозревателе решений и выберите в меню пункт "Add Reference" ("Добавить ссылку"). Откроется диалоговое окно "Add Reference" ("Добавление ссылки"), которое можно видеть на рисунке 1. В этом диалоговом окне выберите вкладку "Browse" ("Обзор") и перейдите к сборке System.Windows.Controls.DataVisualization.Toolkit.dll из папки, в которой установлен набор средств WPF. Эта сборка находится в папке Binaries.  

Совет. Если нежелательно загружать набор средств WPF, то можно загрузить присоединенный проект, скопировать сборки WPFToolkit.dll и System.Windows.Controls.DataVisualization.Toolkit.dll из этого проекта в папку bin вашего проекта и добавить ссылку.

Рисунок 1

После добавления ссылки в разделе References диалогового окна появится элемент System.Windows.Controls.DataVisualization.Toolkit, как показано на рисунке 2.

Рисунок 2

На следующем этапе необходимо выполнить импорт пространств имен System.Windows.Controls.DataVisualization.toolkit и System.Windows.Controls.DataVisualization.Charting на страницу. После ввода на странице "xmlns=" эти пространства имен буду показаны в Intellisense. Выберите и добавьте оба эти пространства имен на страницу, как показано на рисунке 3.

Рисунок 3

Последняя ссылка, добавленная на страницу, выглядит следующим образом. Как можно видеть, я добавил имя этой ссылки в ToolkitRef.

Теперь на странице можно видеть DVC, и если его выбрать, то появится уведомление, что все элементы, связанные с построением диаграмм, добавлены в Intellisense. Чтобы добавить на страницу элемент управления Chart, достаточно выбрать его из списка. Список элементов, связанных с построением диаграмм, выглядит, как показано на рисунке 4.

Рисунок 4

Создание диаграммы

Элемент Chart представляет элемент управления Chart WPF в XAML.

< DVC:Chart></DVC:Chart>

Фрагмент кода, приведенный в листинге 1, создает элемент Chart и устанавливает его свойства ширины, высоты и фона.  

<DVC:Chart Name="MyChart" Width="400" Height="250"
           Background="YellowGreen" >           
</DVC:Chart>

Листинг 1

Результат кода, приведенного в листинге 1, показан на рисунке 5.

Рисунок 5

Типы диаграмм

Для создания типа диаграммы используется атрибут Series элемента Chart. Если посмотреть на рисунок 6, можно заметить атрибуты BarSeries, ColumnSeries, LineSeries, PieSeries и ScatterSeries, и на основе этих атрибутов будут создаваться диаграммы.

Рисунок 6

Линейчатая диаграмма

Фрагмент кода, показанный в листинге 2, создает линейчатую диаграмму путем установки атрибута Chart.Series в BarSeries. Как можно видеть, привязка возникает в полях Key и Value источника данных.

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

Листинг 2

Фрагмент кода, показанный в листинге 3, создает коллекцию в форме KeyValuePair и устанавливает свойство ItemsSource атрибута Series диаграммы. Те же данные можно использовать для других типов диаграмм.

private void LoadBarChartData()

{

    ((BarSeries)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) };

}

Листинг 3

Результат показан на рисунке 7.

Рисунок 7

Гистограмма

Фрагмент кода, показанный в листинге 4, создает гистограмму путем установки атрибута Chart.Series в ColumnSeries. Как можно видеть, привязка возникает в полях Key и Value источника данных.

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

Листинг 4

Фрагмент кода, показанный в листинге 5, создает коллекцию в форме KeyValuePair и устанавливает свойство ItemsSource атрибута Series диаграммы. Те же данные можно использовать для других типов диаграмм.

private void LoadColumnChartData()

{

((ColumnSeries)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) };

}

Листинг 5

Результат показан на рисунке 8.

Рисунок 8

Круговая диаграмма

Фрагмент кода, показанный в листинге 6, создает круговую диаграмму путем установки атрибута Chart.Series в PieSeries. Как можно видеть, привязка возникает в полях 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>

Листинг 6

Фрагмент кода, показанный в листинге 7, создает коллекцию в форме KeyValuePair и устанавливает свойство ItemsSource атрибута Series диаграммы. Те же данные можно использовать для других типов диаграмм.

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) };

}

Листинг 7

Результат показан на рисунке 9.

Рисунок 9

График       

Фрагмент кода, показанный в листинге 8, создает график путем установки атрибута Chart.Series в LineSeries. Как можно видеть, привязка возникает в полях Key и Value источника данных.

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

Листинг 8

Фрагмент кода, показанный в листинге 9, создает коллекцию в форме KeyValuePair и устанавливает свойство ItemsSource атрибута Series диаграммы. Те же данные можно использовать для других типов диаграмм.

private void LoadLineChartData()

{

    ((LineSeries)mcChart.Series[0]).ItemsSource =

        new KeyValuePair<DateTime, int>[]{

            new KeyValuePair<DateTime, int>(DateTime.Now, 100),

            new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(1), 130),

            new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(2), 150),

            new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(3), 125),

            new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(4),155) };

}

Листинг 9

Результат показан на рисунке 10.

Рисунок 10

Точечная диаграмма

Фрагмент кода, показанный в листинге 9, создает точечную диаграмму путем установки атрибута Chart.Series в ScatterSeries. Как можно видеть, привязка возникает в полях Key и Value источника данных.

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

Листинг 9

Фрагмент кода, показанный в листинге 10, создает коллекцию в форме KeyValuePair и устанавливает свойство ItemsSource атрибута Series диаграммы. Те же данные можно использовать для других типов диаграмм.

private void LoadScatterChartData()

{

   

    ((ScatterSeries)mcChart.Series[0]).ItemsSource =

        new KeyValuePair<DateTime, int>[]{

            new KeyValuePair<DateTime, int>(DateTime.Now, 100),

            new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(1), 130),

            new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(2), 150),

            new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(3), 125)

            };

}

Листинг 10

Результат показан на рисунке 11.

Рисунок 11

Диаграмма с областями

Фрагмент кода, показанный в листинге 11, создает диаграмму с областями путем установки атрибута Chart.Series в AreaSeries. Как можно видеть, привязка возникает в полях Key и Value источника данных.

<!-- Area Chart in Code Behind -->
<DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart"
   Width="400" Height="250"
   Background="LightSteelBlue"
           Title="Area Chart"
           LegendTitle="Month Rating">
    <DVC:Chart.Series>
        <DVC:AreaSeries
            Title="Area Chart"
            IndependentValuePath="Key"
            DependentValuePath="Value">
        </DVC:AreaSeries>
    </DVC:Chart.Series>
</DVC:Chart>

Листинг 11

Фрагмент кода, показанный в листинге 12, создает коллекцию в форме KeyValuePair и устанавливает свойство ItemsSource атрибута Series диаграммы. Те же данные можно использовать для других типов диаграмм.

private void LoadAreaChartData()

{

 

    ((AreaSeries)mcChart.Series[0]).ItemsSource =

        new KeyValuePair<string, int>[]{

    new KeyValuePair<string, int>("Jan 2009", 100),

    new KeyValuePair<string, int>("Apr 2009", 180),

    new KeyValuePair<string, int>("July 2009", 110),

    new KeyValuePair<string, int>("Oct 2009", 95),

    new KeyValuePair<string, int>("Jan 2010", 40),

    new KeyValuePair<string, int>("Apr 2010", 95)

    };

}

Листинг 12

Результат показан на рисунке 12.

Рисунок 12

Оси диаграммы

Свойство Axes элемента Chart используется для добавления в диаграмму осей x и y. Фрагмент кода, приведенный в листинге 13, добавляет в диаграмму линейную ось со свойствами ориентации, заголовка, шрифта и другими. 

<DVC:Chart.Axes>
    <!-- Add Horizontal and Vertical Axes-->
    <DVC:LinearAxis
            Orientation="Y"
            Title="New Hires"
            Interval="40"
            Foreground="Black" 
            Background="GreenYellow"
            FontFamily="Georgia"
            FontSize="14"
            FontWeight="Bold"
        />
</DVC:Chart.Axes>

Листинг 13

Новый результат показан на рисунке 13, где можно видеть заголовок с левой стороны диаграммы и форматирование.

Рисунок 13

Создание диаграммы с областями из коллекции

Теперь приступим к созданию диаграммы с областями из коллекции. У меня есть класс Fruit, показанный в листинге 14. В нем имеется два элемента, Name и Share.

class Fruit

{

    public string Name { get; set; }

    public Int16 Share { get; set; }

}

Листинг 14

В листинге 15 показан класс коллекции Fruit, который добавляет некоторые объекты 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 });

    }

}

Листинг 15

Теперь в нашем коде XAML я создаю ресурс с именем FruitCollection и привязываю его к AreaSeries с помощью свойства ItemsSource, как показано в листинге 16.

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

Листинг 16

Код XAML для привязки FruitCollection к AreaSeries приведен в листинге 17.

<DVC:Chart.Series>
    <DVC:AreaSeries Title="Fruits"
        ItemsSource="{StaticResource FruitCollection}"
        IndependentValueBinding="{Binding Path=Name}"
        DependentValueBinding="{Binding Path=Share}">
    </DVC:AreaSeries>
</DVC:Chart.Series>

Листинг 17

Теперь просто построим и выполним проект. Новый результат показан на рисунке 14.

Рисунок 14

Выводы

В этом руководстве показывается, как с помощью набора средств WPF можно создавать разные диаграммы, в том числе линейчатые диаграммы, гистограммы, круговые диаграммы, диаграммы с областями, точечные диаграммы и графики.