如何使用 OxyPlot 在 Xamarin.Forms 便携式应用程序中创建图表？

Question

大家好。我正在创建一个 Xamarin.Forms 便携式应用程序，我想在那里显示一个使用 OxyPlot 的图表。

但是我在互联网上找到的代码似乎不能正常工作。我只想问我如何创建图表，特别是 OxyPlot 中的饼图。从我的 XAML 到 XAML.cs 以及模型和视图模型等其他文件。

能否请您以某种方式向我提供一些说明或代码，以了解我将如何执行此操作？

我希望在我的销售页面中对图表进行编码。

SalesPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="XamarinFormsDemo.Views.SalesPage"
         xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
         BackgroundImage="bg3.jpg"
         Title="Sales Page">

</ContentPage>

SalesPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using OxyPlot;
using Xamarin.Forms;
using OxyPlot.Xamarin.Forms;

namespace XamarinFormsDemo.Views
    {
        public partial class SalesPage : ContentPage
        {       
        public SalesPage()
        {
            InitializeComponent();
        }
    }
}

MainActivity.cs

using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using ImageCircle.Forms.Plugin.Droid;

namespace XamarinFormsDemo.Droid
{
    [Activity(Label = "XamarinFormsDemo", Icon = "@drawable/recordsicon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
        base.OnCreate(bundle);
        global::Xamarin.Forms.Forms.Init(this, bundle);
        OxyPlot.Xamarin.Forms.Platform.Android.PlotViewRenderer.Init();
        LoadApplication(new App());
        ImageCircleRenderer.Init();
        }
    }
}

这实际上是我第一次创建图表，所以请帮助我。谢谢你的帮助。

Answer 1

Oxy Plot 和 Xamarin.Forms here 有入门指南。要回答您的问题，您可以执行以下操作：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="XamarinFormsDemo.Views.SalesPage"
         xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
         BackgroundImage="bg3.jpg"
         Title="Sales Page">

    <oxy:PieSeries ... />

</ContentPage>

关于 PieSeries 的更多文档和一些在 Internet 上使用它的示例。示例：

    private static PlotModel CreateExample()
    {
        var model = new PlotModel { Title = "World population by continent" };

        var ps = new PieSeries
        {
            StrokeThickness = 2.0,
            InsideLabelPosition = 0.8,
            AngleSpan = 360,
            StartAngle = 0
        };

        // http://www.nationsonline.org/oneworld/world_population.htm
        // http://en.wikipedia.org/wiki/Continent
        ps.Slices.Add(new PieSlice("Africa", 1030) { IsExploded = true });
        ps.Slices.Add(new PieSlice("Americas", 929) { IsExploded = true });
        ps.Slices.Add(new PieSlice("Asia", 4157));
        ps.Slices.Add(new PieSlice("Europe", 739) { IsExploded = true });
        ps.Slices.Add(new PieSlice("Oceania", 35) { IsExploded = true });

        model.Series.Add(ps);
        return model;
    }

如何使用 OxyPlot 在 Xamarin.Forms 便携式应用程序中创建图表？

How to Create Charts in Xamarin.Forms Portable Application using OxyPlot?

c#

xamarin

xamarin.forms

pie-chart

oxyplot