WPFでグラフを描画するSparrowChart

WPFのコントロール集にはExtended WPF Toolkitというものがあります。しかし、グラフを描画するChartsコントロールは、Plus Editionということで有料です。
というわけで、フリーのグラフコントロールを探していたところ、SparrowToolkitというものを見つけたので紹介します。

サンプルプログラムの実行結果

サンプルプログラムの実行結果

紹介

Sparrow Toolkitは、様々なグラフを描画するためのコントロール集です。
ChartとBulletGraphの違い、WPFとSilverlight等の違いで10個のパッケージがあり、NuGetから取得可能です。
Chartはx軸とy軸があるようなグラフで、今回はWPFのものであるSparrow.Chart.Wpfを使いました。

使い方

まず初めに、NuGetでSparrow.Chart.Wpfを忘れずに導入してください。基本的には、データバインドで与える数値以外はXAMLに書いていく処理になります。ソースコード等はこちらから

<Window x:Class="Introduction.MainWindow"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
		xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
		xmlns:local="clr-namespace:Introduction"
		xmlns:sc="http://sparrowtoolkit.codeplex.com/wpf"
		mc:Ignorable="d"
		Title="Introduction" Height="350" Width="525">
	<Window.DataContext>
		<local:ViewModel />
	</Window.DataContext>

	<sc:SparrowChart>
		<sc:SparrowChart.XAxis>
			<sc:LinearXAxis />
		</sc:SparrowChart.XAxis>
		<sc:SparrowChart.YAxis>
			<sc:LinearYAxis />
		</sc:SparrowChart.YAxis>

		<sc:LineSeries PointsSource="{Binding Path=Points}" XPath="X" YPath="Fx" />
	</sc:SparrowChart>
</Window>

XAMLではまずSparrowChartの名前空間http://sparrowtoolkit.codeplex.com/wpfを7行目で宣言しています。ここではscとしまいした。

また、データを表示させるためには軸の宣言をする必要があります。X軸(XAxis、横軸)とY軸(YAxis、縦軸)を15行目から20行目で宣言しています。ここではLinearXAxisLinearYAxisで普通のグラフを描画する軸としています。

1本のグラフはそれぞれ***Seriesを宣言することで表示させることができます。Pointsプロパティに1,1,2,4,x3,y3…というように数値を指定していけば、固定したグラフを表示できます。
また、上のようにPointsSourceを使ってViewModelとのデータバインドも使うことができます。XPath属性とYPath属性には、バインドしたコレクションの要素の中で値に対応する属性値を指定します。なお、PointsSourceは何個存在してもよく、複数ある場合は色も自動で変えてくれます。

ViewModelの例として下のコードを用意しました。

	public class ViewModel
	{
		public IEnumerable<Point> Points { get; } = Enumerable.Range(0, 10 + 1)
			.Select(x => new Point { X = x, Fx = Math.Pow(x, 0.5) });
	}

	public struct Point
	{
		public double X { get; set; }
		public double Fx { get; set; }
	}

Pointsというプロパティに、XプロパティとFxプロパティを持つPoint構造体のコレクションを入れています。XAMLのXPath属性とYPath属性には、こうしたプロパティ名を指定します。(データバインドっぽく)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です