2016-07-28 97 views
1

美好的一天。我正在創建一個Xamarin.Forms便攜式應用程序,我可以使用OxyPlot在那裏顯示圖表。Xamarin.Forms:在PieChart佈局中放置一個標籤

我的問題是我該如何將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> 

回答

2

可以實現通過使用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

+0

謝謝你的回答。不過,我想我只需要TextAnnotation部分。我應該把什麼部分放在我的代碼中?我已經這樣做了,這是正確的嗎? http://pastie.org/10925554 –

+0

你需要在我的示例代碼中包含'Axes'。 'annotation.TextPosition = new DataPoint(15,90);'取決於那個。另請注意,(15,90)適用於我的數據。你可能需要調整你的情況。 – jsanalytics

+0

好吧先生,我會馬上試試:) –