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
  • htps : // 코 m포넨 ts. 마린. 코 m/ゔぃ에 w/바 r 짱 rt

  • Oxyplot x Xamarin.Forms
  • htps //w w. 젖꼭지 t. 오 rg / 빠 c 가게 s / 오 xyPぉt. 마린. 푹 rms


  • 정말 Xamarin.Forms에 API가 있다면 기쁩니다!

    좋은 웹페이지 즐겨찾기