Автор: Махеш Чанд (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 и устанавливает его свойства ширины, высоты и фона. Свойства Title и LegendTitle представляют заголовок диаграммы и заголовок легенды.

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

Листинг 1

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

Рисунок 5

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

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

Рисунок 6

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

Фрагмент кода, показанный в листинге 2, создает диаграмму с областями путем установки атрибута 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>

Листинг 2

Фрагмент кода, показанный в листинге 3, создает коллекцию в форме 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)

    };

}

Листинг 3

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

Рисунок 7

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

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

<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>

Листинг 4

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

Рисунок 8

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

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

class Fruit

{

    public string Name { get; set; }

    public Int16 Share { get; set; }

}

Листинг 5

В листинге 6 показан класс коллекции 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 });

    }

}

Листинг 6

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

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

Листинг 7

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

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

Листинг 8

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

Рисунок 8

Выводы

В этом руководстве рассматривалось использование набора средств WPF для создания диаграммы с областями.