c# - Xamarin.Forms:在饼图布局中放置标签

标签 c# xamarin charts xamarin.forms oxyplot

美好的一天。我正在创建一个 Xamarin.Forms 可移植应用程序,我可以在其中使用 OxyPlot 显示图表。

我的问题是如何在其中放置一个TOTAL SALES 标签。因为即使我将 Label 放在我的 .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>

最佳答案

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

enter image description here

关于c# - Xamarin.Forms:在饼图布局中放置标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38636886/

相关文章:

ios - 图表 LineChartView 框架获取 : fatal error: unexpectedly found nil while unwrapping an Optional value

c# - 在 C# 中替换流中的字符串(不覆盖原始文件)

c# - iOS 上的 Xamarin 中所选 TabBarItem 的背景颜色

c# - 如何在 C# 中以编程方式为 WPF 工具包数据网格创建列?

Xamarin测试云提交应用程序和配置文件

C# Montouch/Xamarin - 相机快门速度

javascript - 如何使用 DC.js 使用以下数据类型渲染多折线图 - JAVASCRIPT (DC.js)

javascript - 与折线图和水平条形图同步的工具提示定位

c# - 在 BackGroundWorker 中运行方法并显示 ProgressBar

c# - 在 Vista 中获取可移植设备的路径