2016-11-29 2 views
1

Я использовал OxyPlot в проектах Xamarin.ios и Xamarin.Android для построения диаграмм столбцов. Вот как я нарисовал диаграмму столбцов с помощью оксиплота.Сложенная таблица столбцов с использованием Oxyplot и Xamarin

Теперь мне нужна таблица столбчатых диаграмм. Я не мог найти его в документации. Возможно ли это с помощью оксиплота? Как? Любая помощь оценена ..

public class MeasurementGraph 
{ 

    public PlotModel VitalModel { get; set; } 
    public VitalGraph graph { get; set; } 

    public MeasurementGraph (VitalGraph graph) 
    { 
     this.graph = graph; 
     var model = new PlotModel { Title = "" }; 
     model.PlotAreaBorderColor = OxyColors.Transparent; 

     model.Axes.Add (GetXAxis()); 
     model.Axes.Add (GetYAxis()); 
     model.Series.Add (GetValueSeries()); 

     if (Math.Abs (graph.trendStart) > float.Epsilon && Math.Abs (graph.trendEnd) > float.Epsilon) 
      model.Series.Add (GetXtraSeries()); 
      VitalModel = model; 
     } 

    CategoryAxis GetXAxis() 
    { 
     int fontSize; 
     if (Math.Abs (graph.trendStart) > float.Epsilon) 
      fontSize = 6; 
     else 
      fontSize = 8; 
     CategoryAxis categoryAxis = new CategoryAxis() { 
      Position = AxisPosition.Bottom, 
      MinorTickSize = 0, 
      MajorTickSize = 0, 
      MajorGridlineStyle = LineStyle.None, 
      MinorGridlineStyle = LineStyle.None, 
      FontSize = fontSize, 
      IsPanEnabled = false, 
      IsZoomEnabled = false, 
     }; 

     foreach (string day in graph.dayList) 
      categoryAxis.ActualLabels.Add (day); 
     return categoryAxis; 
    } 

    LinearAxis GetYAxis() 
    { 
     List<float> valueList = graph.valueList.Select (x => float.Parse (x)).ToList(); 
     float maxValue = valueList.Max(); 

     float minValue = valueList.Max(); 


      return new LinearAxis() { 
       AxislineStyle = LineStyle.None, 
       Position = AxisPosition.Left, 
       MinorTickSize = 0, 
       MajorTickSize = 0, 
       MajorGridlineStyle = LineStyle.Solid, 
       MajorGridlineColor = OxyColor.Parse ("#f5f5f5"), 
       MinorGridlineStyle = LineStyle.None, 
       Maximum = maxValue, 
       Minimum = minValue, 
       FontSize = 8, 
       MajorStep = (maxValue - minValue)/4, 
       IsPanEnabled = false, 
       IsZoomEnabled = false 

      }; 
     } 

     ColumnSeries GetValueSeries() 
     { 
      var series = new ColumnSeries(); 
      series.ColumnWidth = 50; 
      for (int i = 0; i < graph.valueList.Count; i++) { 
       series.Items.Add (new ColumnItem { 
        Value = double.Parse (graph.valueList [i]), 
        Color = OxyColor.Parse (graph.colorList [i]) 
       }); 
      } 
      return series; 
     } 

     LineSeries GetXtraSeries() 
     { 
      var series = new LineSeries { 
       StrokeThickness = 2, 
       MarkerType = MarkerType.None, 
       MarkerSize = 4, 
       MarkerStroke = OxyColors.White, 
       MarkerStrokeThickness = 2, 
       Color = OxyColors.Blue 
      }; 
      int xStart = graph.vitalId == 20 ? 0 : -1; 
      int xEnd = graph.vitalId == 20 ? graph.valueList.Count - 1 : graph.valueList.Count; 

      series.Points.Add (new DataPoint (xStart, graph.trendStart)); 
      series.Points.Add (new DataPoint (xEnd, graph.trendEnd)); 
      return series; 
     } 
    } 
+0

Пробовали ли вы 1 серию за стол? Я имею в виду, что вы могли бы перекрывать разные серии столбцов, а высшие - за нижними. – Jose

+0

Как мне это сделать? – HeisenBerg

ответ

3

Это взято из одного из их образцов:

MainPage:

<?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:local="clr-namespace:App48" 
      x:Class="App48.MainPage"> 

    <ContentPage.BindingContext> 
    <local:MyViewModel/> 
    </ContentPage.BindingContext> 

    <oxy:PlotView Model="{Binding Model}"></oxy:PlotView> 

</ContentPage> 

ViewModel:

public class MyViewModel 
{ 
    public PlotModel Model { get; set; } 

    public MyViewModel() 
    { 
     Model = new PlotModel(); 
     Model.LegendBorderThickness = 0; 
     Model.LegendOrientation = LegendOrientation.Horizontal; 
     Model.LegendPlacement = LegendPlacement.Outside; 
     Model.LegendPosition = LegendPosition.BottomCenter; 
     Model.Title = "Simple stacked model"; 
     var categoryAxis1 = new CategoryAxis(); 
     categoryAxis1.MinorStep = 1; 
     categoryAxis1.Labels.Add("Category A"); 
     categoryAxis1.Labels.Add("Category B"); 
     categoryAxis1.Labels.Add("Category C"); 
     categoryAxis1.Labels.Add("Category D"); 
     Model.Axes.Add(categoryAxis1); 
     var linearAxis1 = new LinearAxis(); 
     linearAxis1.AbsoluteMinimum = 0; 
     linearAxis1.MaximumPadding = 0.06; 
     linearAxis1.MinimumPadding = 0; 
     Model.Axes.Add(linearAxis1); 
     var columnSeries1 = new ColumnSeries(); 
     columnSeries1.IsStacked = true; 
     columnSeries1.StrokeThickness = 1; 
     columnSeries1.Title = "Series 1"; 
     columnSeries1.Items.Add(new ColumnItem(25)); 
     columnSeries1.Items.Add(new ColumnItem(137)); 
     columnSeries1.Items.Add(new ColumnItem(18)); 
     columnSeries1.Items.Add(new ColumnItem(40)); 
     Model.Series.Add(columnSeries1); 
     var columnSeries2 = new ColumnSeries(); 
     columnSeries2.IsStacked = true; 
     columnSeries2.StrokeThickness = 1; 
     columnSeries2.Title = "Series 2"; 
     columnSeries2.Items.Add(new ColumnItem(12)); 
     columnSeries2.Items.Add(new ColumnItem(14)); 
     columnSeries2.Items.Add(new ColumnItem(120)); 
     columnSeries2.Items.Add(new ColumnItem(26)); 
     Model.Series.Add(columnSeries2); 
    } 
} 

enter image description here

+0

То, что я хотел, это два столбца, которые кажутся уложенными рядом друг с другом. Я добавил еще одну колонку без использования .IsStacked = true, и я получил то, что искал. Спасибо, что указал мне в правильном направлении. – HeisenBerg

+0

ОК, рад, что вы это сделали. Извините, если я его неправильно понял, но ** уложенная диаграмма столбца ** имеет очень конкретное и недвусмысленное значение, когда дело касается графиков. – jsanalytics

Смежные вопросы