読者です 読者をやめる 読者になる 読者になる

ぴよぴよエンジニアの日記

クラウドベンダーに勤める見習いSEの日記です。発言は私自身の見解であり、必ずしも所属組織の立場、戦略、意見を代表するものではありません。

OxyPlot BarSeriesを使ってみる

.NET Framework用のグラフ描画ライブラリである OxyPlot の紹介です.

今回はBarSeriesになります.

WPFのMVVMインフラストラクチャであるLivetを利用します.

データセット

namespace OxyPlotSample.Models
{
    public enum Sex { Male, Female }
    public enum BloodType { A, B, O, AB }
    public enum Cup { AA, A, B, C, D, E, F}

    public class Person : NotificationObject
    {
        public String Name { get; set; }
        public Sex Sex { get; set; }
        public int? Age { get; set; }
        public BloodType BloodType { get; set; }
        public float Height { get; set; }
        public float Weight { get; set; }
        public float BMI { get; set; }
        public float? Bust { get; set; }
        public float? Waist { get; set; }
        public float? Hip { get; set; }
        public Cup Cup { get; set; }
        public DateTime BirthDay { get; set; }
        public String Hometown { get; set; }
        public String CharacterVoice { get; set; }
        public int? VoiceActorAge { get; set; }
        public String Agency { get; set; }
    }
}

データセット用にPersonクラスを定義しました.
LINQのデータセットと同様のものです.

Bar Series

BarSeriesWindow.xaml

<Window x:Class="OxyPlotSample.Views.BarSeries.BarSeriesWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:oxy="http://oxyplot.org/wpf"
        xmlns:v="clr-namespace:OxyPlotSample.Views"
        xmlns:vm="clr-namespace:OxyPlotSample.ViewModels.BarSeriesViewModels"
        Title="BarSeriesWindow"
        Width="800"
        Height="600">

    <Window.DataContext>
        <vm:BarSeriesViewModel />
    </Window.DataContext>

    <Grid>
        <oxy:Plot>
            <oxy:Plot.Axes>

                <oxy:CategoryAxis GapWidth="0.5"
                                  IsTickCentered="True"
                                  ItemsSource="{Binding Idols}"
                                  LabelField="Name"
                                  MajorStep="1"
                                  Position="Left" />

                <oxy:LinearAxis Title="身長 [cm]"
                                MajorGridlineStyle="Solid"
                                MajorStep="20"
                                Minimum="0"
                                MinorGridlineStyle="Dot"
                                MinorStep="10"
                                Position="Bottom" />
            </oxy:Plot.Axes>

            <oxy:BarSeries FillColor="SkyBlue"
                           ItemsSource="{Binding Idols}"
                           ValueField="Height" />
        </oxy:Plot>
    </Grid>
</Window>

Viewです.
CategoryAxis,BarSeriesのItemsSourceにList<Person>をBindingしています.
それぞれLabelField,ValueFieldにName,Heightを設定し実際に表示するデータを指定しています.

BarSeriesViewModel.cs

namespace OxyPlotSample.ViewModels.BarSeriesViewModels
{
    public class BarSeriesViewModel : ViewModel
    {
        public List<Person> Idols { get; set; }

        public BarSeriesViewModel()
        {
            Initialize();
        }

        public void Initialize()
        {
            Idols = Person.CreateIdolList();
            // 人数が多いので765プロに限定
            Idols = Idols.Where(v => v.Agency == "765").ToList();
        }
    }
}

ViewModelです.
Listを初期化しています.今回は人数が多いので765プロのアイドルに限定しています.



f:id:Santea:20160131224839p:plain
描画結果です.


まとめ

今回は単純なBarSeriesを描画しました.
Data Bindingを用いるとViewModelがとても簡潔に書けるのが良いですね.

以上です.