2013-10-30 40 views
1

我正在使用OxyPlot库,并且我试图显示一个堆积列图表,但它呈现错误。适用于Android的OxyPlot Mono(又名Xamarin.Android)错位绘图。 (堆积列系列)

以下是图表应该如何成为一个样机:

Expected Stacked Bar Chart

这里是我如何创建PlotModel:

private void InitWidget() 
{ 

    _goalsPlotModel = new PlotModel ("Metas") { 
     LegendPlacement = LegendPlacement.Outside, 
     LegendPosition = LegendPosition.BottomCenter, 
     LegendOrientation = LegendOrientation.Horizontal, 
     LegendBorderThickness = 0 
    }; 

    SelectedChannel = new ListOfValue(); 
    SelectedProduct = new Product(); 

    SelectedChannel.Code = string.Empty; 
    SelectedProduct.ProductCode = string.Empty; 

    LoadFilters(); 
    Refresh(); 
} 

这里是我添加系列:

private void FillGoalsPlotModel() 
{ 
    _goalsPlotModel.Series.Clear(); 
    _goalsPlotModel.Axes.Clear(); 

    var goals = new ColumnSeries { 
     Title = "Goals", 
     FillColor = OxyColors.Orange, 
     IsStacked = true, 
     StrokeColor = OxyColors.Black, 
     StrokeThickness = 1 
    }; 

    var sales = new ColumnSeries { 
     Title = "Sales", 
     FillColor = OxyColors.LightGreen, 
     IsStacked = true, 
     StrokeColor = OxyColors.White, 
     StrokeThickness = 1 
    }; 

    var surplus = new ColumnSeries { 
     Title = "Surplus", 
     FillColor = OxyColors.Cyan, 
     IsStacked = true, 
     StrokeColor = OxyColors.Black, 
     StrokeThickness = 1 
    }; 

    var categoryAxisForMonths = new CategoryAxis { 
     Position = AxisPosition.Bottom 
    }; 

    var valueAxis = new LinearAxis (AxisPosition.Left) { 
     MinimumPadding = 0, 
     MaximumPadding = 0.06, 
     AbsoluteMinimum = 0 
    }; 


    foreach (IGoal goal in _goals) { 

     if (goal.GetSales() > goal.GetGoalValue()) { 
      sales.Items.Add (new ColumnItem { Value = goal.GetGoalValue() }); 
      surplus.Items.Add (new ColumnItem { Value = goal.GetSurplus() }); 
     } else { 
      sales.Items.Add (new ColumnItem { Value = goal.GetSales() }); 
      goals.Items.Add (new ColumnItem { 
       Value = goal.GetGoalValue() - goal.GetSales() 
      }); 
     } 
    } 

    foreach (var month in GetMonths()) { 
     categoryAxisForMonths.Labels.Add (month); 
    } 


    _goalsPlotModel.Series.Add (sales); 
    _goalsPlotModel.Series.Add (goals); 
    _goalsPlotModel.Series.Add (surplus); 

    _goalsPlotModel.Axes.Add (categoryAxisForMonths); 
    _goalsPlotModel.Axes.Add (valueAxis); 


    RaisePropertyChanged (() => GoalsPlotModel); 
} 

以下是它是如何呈现的:

Misplaced Stacked Column Series

如果我设置IsStackedfalse它只是画垂直条形图,但每栏底部在y = 0不如预期,但如果IsStacked设置为true每栏底部在不同y值。

它是Android版本的Mono for Android渲染器的Oxyplot中的错误吗? 或者只是我做错了什么? (如果是的话,我在做什么错了?)

+0

嘿阿尔贝托,你能张贴一些输入(可能是假的)我可以测试? – Noctis

回答

1

那么,以下适用于我。 我会在代码后添加一些截图,但我认为你的问题就是你添加点到堆栈的方式。

您在每种情况下都会添加2个点(或者真的是),但您需要将值指定为3(第三个为零)。否则结果将保持堆叠,直到你得到3,并且没有什么看起来是正确的。

我的XAML是直截了当:

<oxy:Plot Model="{Binding MyPlotModel}" /> 

然后我把这个方法从我的构造函数,以创建和设置模式:

private void SetPlot() 
{ 
    var model = new PlotModel("Metas") 
    { 
     LegendPlacement = LegendPlacement.Outside, 
     LegendPosition = LegendPosition.BottomCenter, 
     LegendOrientation = LegendOrientation.Horizontal, 
     LegendBorderThickness = 0 
    }; 

    var goals = new ColumnSeries { 
     Title = "Goals", 
     FillColor = OxyColors.Orange, 
     IsStacked = true, 
     StrokeColor = OxyColors.Black, 
     StrokeThickness = 1 
    }; 

    var sales = new ColumnSeries { 
     Title = "Sales", 
     FillColor = OxyColors.LightGreen, 
     IsStacked = true, 
     StrokeColor = OxyColors.White, 
     StrokeThickness = 1 
    }; 

    var surplus = new ColumnSeries { 
     Title = "Surplus", 
     FillColor = OxyColors.Cyan, 
     IsStacked = true, 
     StrokeColor = OxyColors.Black, 
     StrokeThickness = 1 
    }; 

    var categoryAxisForMonths = new CategoryAxis { 
     Position = AxisPosition.Bottom 
    }; 

    var valueAxis = new LinearAxis (AxisPosition.Left) { 
     MinimumPadding = 0, 
     MaximumPadding = 0.06, 
     AbsoluteMinimum = 0 
    }; 

    // Creating random data for 12 months 
    for (int i = 0; i < 12; i++) 
    { 
     //var goal = 10; // if you want a set goal, use this 
     var goal = RandomHelper.RandomInt(8, 11); // otherwise use this 
     var actualsales = RandomHelper.RandomInt(5, 15); 

     if (actualsales > goal) 
     { 
      sales.Items.Add (new ColumnItem(goal    )); 
      surplus.Items.Add(new ColumnItem(actualsales-goal )); 
      goals.Items.Add (new ColumnItem(0     )); 
     } 
     else 
     { 
      sales.Items.Add (new ColumnItem(actualsales  )); 
      goals.Items.Add (new ColumnItem(goal - actualsales)); 
      surplus.Items.Add(new ColumnItem(0     )); 
     } 

     // Next will create jan - dec in the labels 
     categoryAxisForMonths.Labels.Add(CultureInfo.CurrentUICulture.DateTimeFormat.MonthNames[i]); 

    } 

    model.Series.Add (sales); 
    model.Series.Add (goals); 
    model.Series.Add (surplus); 

    model.Axes.Add (categoryAxisForMonths); 
    model.Axes.Add (valueAxis); 

    MyPlotModel = model; 
} 
public PlotModel MyPlotModel { get; set; } 

RandomHelper是一个简单的类来帮助获得随机量:

public static class RandomHelper 
{ 
    private static readonly Random RandomSeed = new Random(); 

    public static int RandomInt(int min, int max) 
    { 
     return RandomSeed.Next(min, max); 
    } 
} 

而且这里的结果:

Fixed goal

Random goal

的搞笑台词都在空列边界的结果,但你能弄明白:)