適用於Android的OxyPlot Mono（又名Xamarin.Android）錯位繪圖。 （堆積列系列）

Question

我正在使用OxyPlot庫，並且我試圖顯示一個堆積列圖表，但它呈現錯誤。

以下是圖表應該如何成爲一個樣機：

這裏是我如何創建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); 
} 

以下是它是如何呈現的：

如果我設置IsStacked到false它只是畫垂直條形圖，但每欄底部在y = 0不如預期，但如果IsStacked設置爲true每欄底部在不同y值。

它是Android版本的Mono for Android渲染器的Oxyplot中的錯誤嗎？ 或者只是我做錯了什麼？ （如果是的話，我在做什麼錯了？）

Answer 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); 
    } 
} 

而且這裏的結果：

的搞笑臺詞都在空列邊界的結果，但你能弄明白:)