【问题标题】:Xamarin.Forms: Putting A Label Inside A PieChart LayoutXamarin.Forms:将标签放在饼图布局中
【发布时间】:2016-07-28 12:49:16
【问题描述】:

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

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

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

你认为我应该怎么做才能拥有这个?

这是我的代码:

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>

【问题讨论】:

    标签: c# xamarin charts xamarin.forms oxyplot


    【解决方案1】:

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

    【讨论】:

    • 感谢先生的回答。但是,我认为我只需要 TextAnnotation 部分。我应该把它放在我的代码中的哪一部分?我已经这样做了,这是正确的吗? pastie.org/10925554
    • 您需要在我的示例代码中包含Axesannotation.TextPosition = new DataPoint(15, 90); 取决于此。另请注意, (15,90) 适用于我的数据。您可能需要根据自己的情况进行调整。
    • 一旦我删除Axes,图表边框就会消失。因此,添加Axes 确实会添加边框......目前不确定如何避免它......现在您可以使用注释来研究它。
    • 关于移动 TextAnnotation 为您创建的两个轴制作 IsPanEnabled = false
    • 它对我来说停止了移动。实际上问题不在于TextAnnotation 本身。如果您测试任何默认具有轴的图表,例如LineScattered 等(Pie 除外,这就是我们添加轴的原因),您会发现您可以平移整个图表,即使没有任何 @ 987654336@。创建一个只有简单折线图的测试项目,测试IsPanEnabled的效果。另请注意,Pie 未链接到 Axe,这就是为什么它不会移动,但注释会移动。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-27
    • 1970-01-01
    • 2017-04-13
    • 1970-01-01
    • 2014-03-23
    • 2014-10-09
    相关资源
    最近更新 更多