Mobiele apps programmeren met Xamarin – Charts integreren

print

Inhoud


Wat vooraf ging

Ik herneem hier even een vorige post over het installeren van NuGet Packages (plug-ins).

NuGet is een package manager voor Microsoft development platforms zoals .NET. U kunt deze pakketten installeren om zo de mogelijkheden van uw project uit te breiden.

  • Om een NuGet package te installeren klikt u rechts op het project waar u het NuGet package wilt voor installeren of u klikt rechts op de Solution om het NuGet package meteen te installeren voor alle projecten.
  • Vervolgens klikt u op Manage NuGet packages for Solution….

  • Selecteer het NuGet package dat u wil installeren.
  • Vink alle projecten aan waarvoor u het wilt installeren.
  • Klik op Install.

Onderstaande video toont een volledige installatie (zij het in Visual Studio 2015 en voor een ASP.NET project maar in weze verschilt dit niet).


Inleiding

Microcharts is een gratis en eenvoudige plug-in om charts toe te voegen aan uw app.

  • Start een nieuw Xamarin-project en geef het een passende naam (bv. TestChart).

Microcharts – Installeren

  • Klik rechts op de Solution om het NuGet package meteen te installeren voor alle projecten.
  • Vervolgens klikt u op Manage NuGet packages for Solution….
  • Klik op Browse.
  • Zoek naar Microcharts, selecteer alle projecten en de laatste stabiele versie en klik op Install.

Hieronder ziet u de reeds geïnstalleerde plug-in.


Microcharts – Een praktische toepassing

  • Pas de XAML van MainPage.xaml als volgt aan.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms" xmlns:local="clr-namespace:TestCharts" x:Class="TestCharts.MainPage">
    <StackLayout>
        <Button Text="Toon charts!" Clicked="Button_Clicked" />
        <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowSpacing="5" ColumnSpacing="5" BackgroundColor="Gray" Padding="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>

            <microcharts:ChartView x:Name="chartBar" Grid.Row="0" Grid.Column="0" />
            <microcharts:ChartView x:Name="chartPoint" Grid.Row="0" Grid.Column="1" />
            <microcharts:ChartView x:Name="chartLine" Grid.Row="1" Grid.Column="0" />
            <microcharts:ChartView x:Name="chartDonut" Grid.Row="1" Grid.Column="1" />
            <microcharts:ChartView x:Name="chartRadialGauge" Grid.Row="2" Grid.Column="0" />
            <microcharts:ChartView x:Name="chartRadar" Grid.Row="2" Grid.Column="1" />
        </Grid>

    </StackLayout>
</ContentPage>

Merk op dat de namespace naar xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms" opgenomen is.

Er is een Grid aangemaakt met 2 rijen en 3 kolommen. Ook is er een beetje ruimte gecreëerd met RowSpacing="5" ColumnSpacing="5" BackgroundColor="Gray" Padding="5"

Er zijn 6 grafieken aangemaakt die elk in een cel van de Grid komen.

  • Pas de Code-behind in MainPage.xaml.cs als volgt aan.
using Microcharts;
using SkiaSharp;
using System;
using Xamarin.Forms;

namespace TestCharts
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            var entries = new[]
            {
                new Microcharts.Entry(200)
                {
                    Label = "Januari",
                    ValueLabel = "200", 
                    Color = SKColor.Parse("#266489")
                },
                new Microcharts.Entry(400)
                {
                Label = "Februari",
                ValueLabel = "400",
                Color = SKColor.Parse("#68B9C0")
                },
                new Microcharts.Entry(-100)
                {
                Label = "Maart",
                ValueLabel = "-100",
                Color = SKColor.Parse("#90D585")
                }
            };

            var Bar = new BarChart() { Entries = entries };
            var Point = new PointChart() { Entries = entries };
            var Line = new LineChart() { Entries = entries };
            var Donut = new DonutChart() { Entries = entries };
            var RadialGauge = new RadialGaugeChart() { Entries = entries };
            var Radar = new RadarChart() { Entries = entries };

            chartBar.Chart = Bar;
            chartPoint.Chart = Point;
            chartLine.Chart = Line;
            chartDonut.Chart = Donut;
            chartRadialGauge.Chart = RadialGauge;
            chartRadar.Chart = Radar;
        }
    }
}

Vergeet niet de nodige namespace op te nemen.

using Microcharts;
using SkiaSharp;

Er worden entries aangemaakt die de waarden bevatten die in de chart moeten worden weergegeven. Er worden 3 eigenschappen gebruikt Label, ValueLabel en Color. De gebruikte kleur is een kleur van het type SKColor (vandaar using SkiaSharp;).

var entries = new[]
{
    new Microcharts.Entry(200)
    {
        Label = "Januari",
        ValueLabel = "200", 
        Color = SKColor.Parse("#266489")
    },
    new Microcharts.Entry(400)
    {
    Label = "Februari",
    ValueLabel = "400",
    Color = SKColor.Parse("#68B9C0")
    },
    new Microcharts.Entry(-100)
    {
    Label = "Maart",
    ValueLabel = "-100",
    Color = SKColor.Parse("#90D585")
    }
};

Microcharts komt met 6 charts, die hier allen worden aangemaakt op basis van de Entries.

var Bar = new BarChart() { Entries = entries };
var Point = new PointChart() { Entries = entries };
var Line = new LineChart() { Entries = entries };
var Donut = new DonutChart() { Entries = entries };
var RadialGauge = new RadialGaugeChart() { Entries = entries };
var Radar = new RadarChart() { Entries = entries };

Tenslotte worden deze charts toegekend aan hun XAML-view.

chartBar.Chart = Bar;
chartPoint.Chart = Point;
chartLine.Chart = Line;
chartDonut.Chart = Donut;
chartRadialGauge.Chart = RadialGauge;
chartRadar.Chart = Radar;


Behandelde Basiscompetenties uit de module ICT Programmeren – Integratie externe functionaliteiten

  • IC BC024 – * kan zijn eigen deskundigheid inzake ICT opbouwen
  • IC BC232 – kan digitale tools gebruiken om modellen, simulaties en visualisaties van de realiteit te maken
  • IC BC258 – houdt rekening met regelgeving m.b.t. licenties voor het gebruik en de publicatie van broncode
  • IC BC288 – kan ICT-problemen oplossen

Geef een reactie

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.