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

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

Xamarin.AndroidでOxyPlotを使ってみた

以前WPFのグラフ描画ライブラリとして紹介したOxyPlotをXamarin.Androidでも使ってみました.
santea.hateblo.jp


開発環境



パッケージの導入

NuGetで導入ができます.

f:id:Santea:20160306012223p:plain

プレリリースのパッケージなので"show pre-release packages"のチェックをお忘れなく.


レイアウト

<oxyplot.xamarin.android.PlotView
        android:id="@+id/plotView"
        android:layout_width="match_parent"
        android:layout_height="150dp" />

Viewを継承したPlotViewを用います.


コード

private void CreatePlot1 ()
{
    var plotView = FindViewById<PlotView> (Resource.Id.plotView1);
    plotView.Model = new OxyPlot.PlotModel ();
    plotView.Model.PlotAreaBorderColor = OxyColors.LightGray;

    var axisX = new LinearAxis ();
    axisX.Title = "時価総額 [$10億円]";
    axisX.FontSize = 20;
    axisX.Position = AxisPosition.Bottom;
    plotView.Model.Axes.Add (axisX);

    var axisY = new CategoryAxis ();
    axisY.ItemsSource = this.NameValueList;
    axisY.LabelField = "Name";
    axisY.IsTickCentered = true;
    axisY.Position = AxisPosition.Left;
    axisY.FontSize = 20;
    plotView.Model.Axes.Add (axisY);

    var series = new BarSeries ();
    series.ItemsSource = this.NameValueList;
    series.ValueField = "Value";
    series.FillColor = OxyColors.SkyBlue;
    series.StrokeColor = OxyColors.SkyBlue;
    plotView.Model.Series.Add (series);
}
private void CreatePlot2 ()
{
    var plotView = FindViewById<PlotView> (Resource.Id.plotView2);
    plotView.Model = new OxyPlot.PlotModel ();
    plotView.Model.PlotAreaBorderColor = OxyColors.LightGray;

    var axisX = new DateTimeAxis ();
    axisX.Title = "日付";
    axisX.FontSize = 20;
    axisX.StringFormat = "MM/dd";
    axisX.Position = AxisPosition.Bottom;
    plotView.Model.Axes.Add (axisX);

    var axisY = new LinearAxis ();
    axisY.Position = AxisPosition.Left;
    axisY.Title = "株価 [USD]";
    axisY.FontSize = 20;
    plotView.Model.Axes.Add (axisY);

    var series = new LineSeries ();
    series.ItemsSource = this.DateValueList;
    series.DataFieldX = "Date";
    series.DataFieldY = "Value";
    series.Color = OxyColors.Orange;
    plotView.Model.Series.Add (series);
}
private void CreatePlot3 ()
{
    var plotView = FindViewById<PlotView> (Resource.Id.plotView3);
    plotView.Model = new OxyPlot.PlotModel ();
    plotView.Model.PlotAreaBorderColor = OxyColors.LightGray;

    var series = new PieSeries ();
    series.Slices.Add (new PieSlice ("Android", 52.3));
    series.Slices.Add (new PieSlice ("iOS", 45.1));
    series.Slices.Add (new PieSlice ("Windows", 0.4));
    plotView.Model.Series.Add (series);
}

基本的にコード側で直書きしていますが、ItemsSourceにListを渡し、Fieldにバインドする要素名を指定してできるだけ簡略化しています.

AxisはデフォルトでPositionにAxisPosition.Bottomがセットされているのですが、それぞれのグラフに合った軸を合った位置にセットしないとエラーが出ます.


描画結果

f:id:Santea:20160308015049p:plain

上からBarSeries, LineSeries, PieSeriesです.

フラットデザインな感じですが、Androidのマテリアルデザインと組み合わせてもそれほど違和感なく使えると思います.


まとめ

Xamarin.AndroidでOxyPlotを使ってみました.

OxyPlotはBarSeriesやLinearSeriesなどの基本的なものにとどまらず、HeatMapなどの少し凝ったグラフも使えるのでなかなか有用ではないでしょうか?

また、WPFで用いるクラスと同じクラスをXamarin.Androidでも使えるのは非常に嬉しい点ですが、WPFのBindingを使えないため、どうしてもコード側が複雑になり可読性が下がってしまうのは否めません.

Xamarin.AndroidでもBindingが使えるのか否か、もう少し調べたいと思います.

以上です.