День тридцатый первый. Диаграммы данных

Вступление

В мире бизнеса очень популярны различные диаграммы, наглядно показывающие различные финансовые показатели. Когда диаграмма показывает рост прибыли, то душа поет и хочется сделать что-нибудь этакое. А когда график доходов ползет вниз, то настроение падает. Диаграммы бывают разными, мы рассмотрим часть из них.

И снова Silverlight Toolkit

Мы уже знакомились с пакетом Silverlight Toolkit for Windows Phone (День 21), который содержит несколько полезных компонентов. В их число входят и такие элементы, как PieSeries и BarSeries.

Элемент PieSeries

Добавьте в проект ссылки на сборки System.Windows.Controls и System.Windows.Controls.DataVisualization.Toolkit. Для удобства создадим отдельные страницы для каждого рассматриваемого элемента. Добавим в начале XAML код:


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

После этого можно добавить элементы в приложение. Давайте начнем с элемента PieSeries:


<chart:Chart>
	<chart:PieSeries />
</chart:Chart>

Приведенный код слишком простой. Усложним его, сделав привязку данных в коде и даже немного изменим элемент программно. Для привязки будем использовать свойство ItemsSource элемента PieSeries (файл PieSeriesControl.xaml.cs):


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;

namespace Day31_ChartingControls
{
	public partial class PieSeriesControl : PhoneApplicationPage
	{
		VideoGameCharacter[] pacman = new VideoGameCharacter[2] { new VideoGameCharacter("Resembles", 8), new VideoGameCharacter("Doesn't resemble", 2)};
		
		public PieSeriesControl()
		{
			InitializeComponent();
			PieSeries pieSeries = PieChart.Series[0] as PieSeries;
			pieSeries.ItemsSource = pacman;
		}
	}

	public class VideoGameCharacter
	{
		public string Label { get; set; }
		public int Value { get; set; }

		public VideoGameCharacter(string label, int value)
		{
			Label = label;
			Value = value;
		}
	}
}

Как видите, мы работаем не с самим элементом PieSeries, а его родителем - элементом Chart, а затем устанавливем фрагмент диаграммы в позицию 0 из коллекции сегментов.

Также необходимо связать различную информацию с элементом PieSeries в файле XAML: DependentValueBinding и IndependentValueBinding. DependentValueBinding отвечает за размеры сегментов в Pie Chart, а IndependentValueBinding отвечает за текст к данным.


<chart:Chart x:Name="PieChart">
	<chart:PieSeries 
		IndependentValueBinding="{Binding Label}"
		DependentValueBinding="{Binding Value}"/>
</chart:Chart>

Элемент BarSeries

Принцип работы с элементом BarSeries идентичен с предыдущим элементом. Создаем элемент, делаем привязку данных...все тоже самое:


<chart:Chart x:Name="BarChart" Foreground="Gray" Title="Midwest City Populations">
	<chart:BarSeries
		Title="Population"
		IndependentValueBinding="{Binding Name}"
		DependentValueBinding="{Binding Population}"/>
	<chart:Chart.Axes>
		<chart:CategoryAxis Title="City" Orientation="Y" FontStyle="Italic"/>
		<chart:LinearAxis Title="Population" Orientation="X" Minimum="0" Maximum="2500000" Interval="500000" ShowGridLines="True"  FontStyle="Italic"/>
	</chart:Chart.Axes>
</chart:Chart>

Вы видите, что для диаграмм используются оси Category и Linear с названиями Titles и расположением Orientations, а также можно использовать максимальные и минимальные значения при желании. Вот код для файла BarSeriesControl.xaml.cs.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;

namespace Day31_ChartingControls
{
	public partial class BarSeriesControl : PhoneApplicationPage
	{
		List<City> cities = new List<City> { 
			new City { Name = "CLE", Population = 2250871 }, 
			new City { Name = "CMH", Population = 1773120 }, 
			new City { Name = "CVG", Population = 2155137 }, 
			new City { Name = "DET", Population = 4425110 } };
		
		public BarSeriesControl()
		{
			InitializeComponent();
			BarSeries bs = BarChart.Series[0] as BarSeries;
			bs.ItemsSource = cities;
		}
	}
} 

Вот и все об использовании диаграмм в приложении! Напоминаю, что взять их можно по адресу http://silverlight.codeplex.com. Постройте диаграмму роста продаж ваших программ и пусть это будут позитивные диаграммы. Удачи в бизнесе!

Реклама