2016-07-28 19 views
1

Good Day。私はXamarin.Formsポータブルアプリケーションを作成しています。そこでは、OxyPlotを使ってグラフを表示することができました。Xamarin.Forms:PieChartレイアウト内にラベルを貼る

私の問題は、どのように合計売上ラベルをそこに入れるつもりですか。私の.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

よろしくお願いします。 –

関連する問題