Xamarin FormsとOxyplotでPCLなグラフをタダで描く

Xamarin Formsでアプリ開発する中で
グラフ描画にOxyplotを使用する機会があったので、メモしておきます。

最初、調査した時は

欲しいグラフに対応してない（棒グラフしか描けない）、有償、PCL対応ではない...

など壁にぶつかる中

Oxyplotは、無償で、PCL対応,多くのグラフ描画に対応しています。
棒/積み上げ棒グラフ、円グラフ、折れ線グラフ、散布図、etc
複合グラフも描画できます.

使用したライブラリとソースの例を紹介します

使用したライブラリ(Nugetから取得)

• Oxyplot 1.0.0-1968
• Oxyplot.Xamarin.Forms 1.0.0-1968
• Oxyplot.Xamarin.iOS (iOSでのみ使用)
• Oxyplot.Xamarin.Android(Androidでのみ使用)

ソース(円グラフの例)

using System;
using OxyPlot.Series;
using OxyPlot;
using OxyPlot.Xamarin.Forms;
using Xamarin.Forms;
using System.Collections.Generic;

namespace Sample
{
	public class GraphTest : ContentPage
	{
		public GraphTest ()
		{
			
			var plotModel = new PlotModel { 
				Title = "一番好きなグラフは？",
				LegendTitle = "凡例",
				LegendPlacement = LegendPlacement.Outside,
				LegendBackground = OxyColors.White,
				LegendBorder = OxyColors.Red,
				LegendTextColor = OxyColors.Black,
				LegendSymbolPlacement = LegendSymbolPlacement.Left,
				LegendTitleColor = OxyColors.Black,
				PlotAreaBorderColor = OxyColors.Transparent,

				Series = {
					new BarSeries (){ Title = "棒グラフ", FillColor = OxyColors.DarkViolet },
					new BarSeries (){ Title = "折れ線グラフ", FillColor = OxyColor.FromRgb (0, 158, 115) },
					new BarSeries (){ Title = "円グラフ", FillColor = OxyColor.FromRgb (86, 180, 233) },
					new BarSeries (){ Title = "帯グラフ", FillColor = OxyColor.FromRgb (230, 159, 0) },
					new BarSeries (){ Title = "散布図", FillColor = OxyColor.FromRgb (0, 114, 178) },
					new BarSeries (){ Title = "ウィーグラフ", FillColor = OxyColor.FromRgb (240, 228, 66) },
					new PieSeries { 
						StrokeThickness = 2.0, 
						InsideLabelPosition = 0.8, 
						AngleSpan = 360, 
						StartAngle = 0,

						Slices = new List<PieSlice> {

							new PieSlice ("棒グラフ", 20) { Fill = OxyColors.DarkViolet, IsExploded = true },
							new PieSlice ("折れ線グラフ", 20){ Fill = OxyColor.FromRgb (0, 158, 115), IsExploded = true },
							new PieSlice ("円グラフ", 20) { Fill = OxyColor.FromRgb (86, 180, 233), IsExploded = true },
							new PieSlice ("帯グラフ", 20) { Fill = OxyColor.FromRgb (230, 159, 0), IsExploded = true },
							new PieSlice ("散布図", 20) { Fill = OxyColor.FromRgb (0, 114, 178), IsExploded = true },
							new PieSlice ("ウィーグラフ", 3) { Fill = OxyColor.FromRgb (240, 228, 66), IsExploded = true },
						}
					}
				}
			};

			var plotView = new PlotView { 
				VerticalOptions = LayoutOptions.FillAndExpand,
				HorizontalOptions = LayoutOptions.FillAndExpand,

				Model = plotModel
			};

			Content = new StackLayout { 
				VerticalOptions = LayoutOptions.FillAndExpand,
				HorizontalOptions = LayoutOptions.FillAndExpand,
				WidthRequest = 350,
				HeightRequest = 350,
				Children = {
					
					plotView
				}
			};
		}
	}
}

参考

• BarChart
  • https://components.xamarin.com/view/barchart
• Oxyplot x Xamarin.Forms
  • https://www.nuget.org/packages/OxyPlot.Xamarin.Forms

ホントはXamarin.FormsにAPIがあると嬉しいです！