Basic course of Xamarin chart Development -- OxyPlot framework

Basic tutorial of Xamarin chart development (4) OxyPlot framework

Drawing line in XamaminAndroid OxyPlotAndroidDemo

[example 1-1: OxyPlotAndroidDemo] the line drawing is implemented below. The specific operation steps are as follows:

(1) open the Xamarin.Android project.

(2) add the OxyPlot.Xamarin.Android component to the introduction of the project.

(3) open the activity main.axml file and use PlotView for layout. The code is as follows:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

  <OxyPlot.Xamarin.Android.PlotView

      android:id="@+id/plot_view"

      android:layout_width="match_parent"

      android:layout_height="match_parent"/>

</RelativeLayout>

(4) open MainActivity.cs file, and realize the remaining steps in this file, that is, drawing chart and setting display mode. The code is as follows:

using Android.App;

using Android.OS;

using Android.Support.V7.App;

using Android.Runtime;

using Android.Widget;

using OxyPlot.Xamarin.Android;

using OxyPlot;

using OxyPlot.Axes;

using OxyPlot.Series;

namespace OxyPlotAndroidDemo

{

    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]

    public class MainActivity : AppCompatActivity

    {

        protected override void OnCreate(Bundle savedInstanceState)

        {

            base.OnCreate(savedInstanceState);

           

            // Set our view from the "main" layout resource

            SetContentView(Resource.Layout.activity_main);

            PlotView view = FindViewById<PlotView>(Resource.Id.plot_view);

            view.Model = CreatePlotModel();                                                       //Set display mode

        }

        //Drawing charts

        private PlotModel CreatePlotModel()

        {

            //Create chart mode

            var plotModel = new PlotModel

            {

                Title = "OxyPlot Demo"

            };

            //Add axis

            plotModel.Axes.Add(new LinearAxis { Position = AxisPosition.Bottom });

            plotModel.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Maximum = 10, Minimum = 0 });

            //Create data column

            var series1 = new LineSeries

            {

                Title= "Data",

                MarkerType = MarkerType.Circle,

                MarkerSize = 4,

                MarkerStroke = OxyColors.White

            };

            //Add data point

            series1.Points.Add(new DataPoint(0.0, 6.0));

            series1.Points.Add(new DataPoint(1.4, 2.1));

            series1.Points.Add(new DataPoint(2.0, 4.2));

            series1.Points.Add(new DataPoint(3.3, 2.3));

            series1.Points.Add(new DataPoint(4.7, 7.4));

            series1.Points.Add(new DataPoint(6.0, 6.2));

            series1.Points.Add(new DataPoint(8.9, 8.9));

            //Add data column

            plotModel.Series.Add(series1);

            return plotModel;

        }

    }

}

Run the program, and the chart displayed is shown in Figure 1.1.

Figure 1.1 line map effect of Xamarin.Android platform

Tags: Mobile Android xml encoding

Posted on Sun, 10 Nov 2019 06:09:36 -0800 by Hayce