Xamarin.Forms:在PieChart布局中放置标签

时间:2016-07-28 12:49:16

标签: c# xamarin charts xamarin.forms oxyplot

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

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

我想把标签放在那里(在红色边框内)。

enter image description here

为了拥有这个,你认为我应该怎么做?

这是我的代码:

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 个答案:

答案 0 :(得分:3)

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

text selection