Xamarin.Forms:在PieChart布局中放置标签 [英] Xamarin.Forms: Putting A Label Inside A PieChart Layout

问题描述

美好的一天.我正在创建一个Xamarin.Forms便携式应用程序，在其中可以使用OxyPlot在其中显示图表.

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

我的问题是如何在其中放置 TOTAL SALES 标签.因为即使我将标签放在.XAML页面中，它也不会出现.

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?

这是我的代码:

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>

推荐答案

您可以使用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);

这篇关于Xamarin.Forms:在PieChart布局中放置标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！