OxyPlotでグラフ描画

Codeplexを色々見ていたら、OxyPlotというグラフ描画ライブラリを見つけました。
これはなかなか便利そう。
http://oxyplot.codeplex.com/

ちょこっとしか使ってないけど、備忘録としてメモしときます。

準備

Nugetからインストールできます。
OxyPlotで検索すると、たくさん出てきますが、
OxyPlot.Wpf_NoPCLをインストールすればOK。

OxyPlot.Wpfの方を使うと、Visualstudioのデザイナ画面でエラーが出て表示できないようです。

使い方

Plotを画面に配置しておき、
その下にSeries派生のクラスを設定します。
ここで配置したSeries派生クラスの種類で、グラフの種類(折れ線グラフ,棒グラフ)などが決まります。
グラフの軸は、PlotのAxesプロパティに、Axis派生クラスのインスタンスを渡すことで設定できます。

コードビハインドから作成

以下を参考にしてみました。
http://oxyplot.codeplex.com/wikipage?title=WpfExample1&referringTitle=Home

・コードビハインド

using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Series;
using System.Collections.ObjectModel;
using System.Windows;

namespace OxyPlotSample
{
    /// <summary>
    /// PlotWindow1.xaml の相互作用ロジック
    /// </summary>
    public partial class PlotWindow1 : Window
    {
        public PlotModel MyPlotModel { get; set; }

        public ObservableCollection<Item> Items { get; set; }

        public PlotWindow1()
        {
            InitializeComponent();

            Items = new ObservableCollection<Item>()
            {
                new Item(){Label = "Sample1", Value1 = 5},
                new Item(){Label = "Sample2", Value1 = 3},
                new Item(){Label = "Sample3", Value1 = 6},
            };

            MyPlotModel = new PlotModel("棒グラフ");
            var cs = new ColumnSeries() { ValueField = "Value1", ItemsSource = Items };

            MyPlotModel.Series.Add(cs);
            MyPlotModel.Axes.Add(new LinearAxis(AxisPosition.Left, 0, 10));
            MyPlotModel.Axes.Add(new CategoryAxis() { LabelField="Label", ItemsSource = Items });

            this.DataContext = MyPlotModel;
        }
    }
    public class Item
    {
        public string Label { get; set; }
        public double Value1 { get; set; }
    }
}

・XAMLコード

<Window x:Class="OxyPlotSample.PlotWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:oxy="clr-namespace:OxyPlot.Wpf;assembly=OxyPlot.Wpf"
        Title="PlotWindow1" Height="400" Width="600">
    <Grid>
        <oxy:Plot Model="{Binding}"/>
    </Grid>
</Window>

XAMLから作成

今度は、↓を参考にXAMLでグラフ用のコントロールを作成してみます。
http://oxyplot.codeplex.com/wikipage?title=WpfExample2&referringTitle=Home

・コードビハインド

using System.Collections.ObjectModel;
using System.Windows;

namespace OxyPlotSample
{
    /// <summary>
    /// PlotWindow2.xaml の相互作用ロジック
    /// </summary>
    public partial class PlotWindow2: Window
    {
        public ObservableCollection<Item> Items { get; set; }

        public PlotWindow2()
        {
            InitializeComponent();
            this.DataContext = this;

            Items = new ObservableCollection<Item>()
            {
                new Item(){Label = "Sample1", Value1 = 5},
                new Item(){Label = "Sample2", Value1 = 3},
                new Item(){Label = "Sample3", Value1 = 6},
            };
        }
    }

    public class Item
    {
        public string Label { get; set; }
        public double Value1 { get; set; }
    }
}

・XAMLコード

<Window x:Class="OxyPlotSample.PlotWindow2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:oxy="clr-namespace:OxyPlot.Wpf;assembly=OxyPlot.Wpf"
        Title="PlotWindow2" Height="400" Width="600">
    <Grid>
        <oxy:Plot>
            <oxy:Plot.Axes>
                <oxy:CategoryAxis ItemsSource="{Binding Items}" LabelField="Label"/>
                <oxy:LinearAxis Minimum="0" Maximum="10" Position="Left"/>
            </oxy:Plot.Axes>
            <oxy:ColumnSeries ItemsSource="{Binding Items}" ValueField="Value1"/>
        </oxy:Plot>
    </Grid>
</Window>