Xamarin.Forms: Putting A Label Inside A PieChart Layout

问题

Good Day. I'm creating a Xamarin.Forms Portable Application where I was able to display there a Chart using OxyPlot.

My problem is how am I going to put a TOTAL SALES label in there. Because even if I put the Label in my .XAML page, it doesn't not appear.

I want to put the Label there (inside the Red Border).

What do you think I should do in order to have this?

Here's my code:

SalesViewModel.cs

using OxyPlot;
using OxyPlot.Series;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;


namespace XamarinFormsDemo.ViewModels
{
    public class SalesPerProductViewModel : INotifyPropertyChanged
    {
    private PlotModel modelP1;
    public SalesPerProductViewModel()
    {
        // PieViewModel vm = new PieViewModel();

        modelP1 = new PlotModel
        {
            Title = "Sales Per Product",
            TitleColor = OxyColors.Teal,
            TitleFontSize = 30,
            TextColor = OxyColors.White,
            DefaultFont = "Arial Black",
            DefaultFontSize = 20

        };


        dynamic seriesP1 = new PieSeries { StrokeThickness = 2.0, InsideLabelPosition = 0.8, AngleSpan = 360, StartAngle = 0 };

        seriesP1.Slices.Add(new PieSlice("Keyboard", 5900) { IsExploded = false, Fill = OxyColors.Teal });
        seriesP1.Slices.Add(new PieSlice("Monitor", 4430) { IsExploded = true });
        seriesP1.Slices.Add(new PieSlice("Flash Drive", 11620) { IsExploded = true });
        seriesP1.Slices.Add(new PieSlice("Hard Drive", 7000) { IsExploded = true });
        seriesP1.Slices.Add(new PieSlice("RAM", 8000) { IsExploded = true });

        modelP1.Series.Add(seriesP1);
        this.SalesPerProductModel = modelP1;

    }

    public PlotModel SalesPerProductModel { get; private set; }



    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    }
}

SalesPerProductPage.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"
         xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
         xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
         x:Class="XamarinFormsDemo.Views.SalesPerProductPage"
         BackgroundImage="bg3.jpg"
         Title="Sales Per Product">


  <ContentPage.BindingContext>
    <ViewModels:SalesPerProductViewModel/>
  </ContentPage.BindingContext>



  <Label Text="TOTAL SALES LABEL HERE!"
   TextColor="#24e97d"/>

    <oxy:PlotView Model="{Binding SalesPerProductModel}" />
</ContentPage>

回答1:

You can achieve that by using TextAnnotation:

        List<Tuple<string, int>> data = new List<Tuple<string, int>>
        {
            new Tuple<string, int>("Product 1", 100),
            new Tuple<string, int>("Product 2", 200),
            new Tuple<string, int>("Product 3", 300),
            new Tuple<string, int>("Product 4", 400),
            new Tuple<string, int>("Product 5", 500),
        };

        PieSeries pieSeries = new PieSeries();
        pieSeries.FontSize = 32;
        pieSeries.TextColor = OxyColors.White;
        pieSeries.InsideLabelColor = OxyColors.White;
        pieSeries.StrokeThickness = 2;

        foreach (Tuple<string, int> t in data)
            pieSeries.Slices.Add(new PieSlice(t.Item1, t.Item2));

        MyModel.Series.Add(pieSeries);

        MyModel.Title = "Sales Per Product";
        MyModel.TitleColor = OxyColors.Teal;
        MyModel.TitleFontSize = 36;

        MyModel.Axes.Add(new LinearAxis() { Position = AxisPosition.Bottom, IsAxisVisible = false });
        MyModel.Axes.Add(new LinearAxis() { Position = AxisPosition.Left, IsAxisVisible = false });

        int total = data.Sum(p => p.Item2);

        TextAnnotation annotation = new TextAnnotation();
        annotation.Text = string.Format("{0:C2}", total);
        annotation.TextColor = OxyColors.Red;
        annotation.Stroke = OxyColors.Red;
        annotation.StrokeThickness = 5;
        annotation.FontSize = 36;
        annotation.TextPosition = new DataPoint(15, 90);

        MyModel.Annotations.Add(annotation);

来源：https://stackoverflow.com/questions/38636886/xamarin-forms-putting-a-label-inside-a-piechart-layout

标签

Xamarin

charts

xamarin.forms

OxyPlot