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

14295 ワード
iOS Xamarin.Forms Xamarin Android graph Android テキストリンク

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
                }
            };
        }
    }
}

参考

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