Xamarin.Android で OxyPlot を使ってみた

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

開発環境

  • Mac OS X Yosemite
  • Xamarin Studio 5.10.2
  • Xamarin.Android 6.0.1.10

パッケージの導入

NuGet で導入できます.

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

レイアウト


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

コード

private void CreatePlot1 ()
{
    var plotView = FindViewById (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 (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 (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がセットされているのですが、それぞれのグラフに合った軸を合った位置にセットしないとエラーが出ます.

描画結果

上からBarSeries, LineSeries, PieSeriesです.

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

まとめ

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

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

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

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

以上です.