Xamarin表单中具有多个条目的条形图/线性图

本文介绍了Xamarin表单中具有多个条目的条形图/线性图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我必须在Xamarin.Forms中实现多个数据条目的线性和条形图，我已经看到了多个插件，例如Microcharts，但我认为它不能提供多个条目，而Syncfusion却可以提供但不是免费的。

图表示例：

条形图代码

  [X amlCompilation（XamlCompilationOptions.Compile）] 
公共部分类BarGraphsDemo：ContentPage 
 {
 private PlotView _opv = new PlotView（）; 
 public BarGraphsDemo（）
 {
 InitializeComponent（）; 
 
 var plotModel = new PlotModel {标题= OxyPlot演示}; 
 CategoryAxis xaxis =新的CategoryAxis（）; 
 xaxis.Position = AxisPosition.Bottom; 
 xaxis.MajorGridlineStyle = LineStyle.Solid; 
 xaxis.MinorGridlineStyle = LineStyle.Dot; 
 xaxis.Labels.Add（ 2/2010）; 
 xaxis.Labels.Add（ 2/2011）; 
 xaxis.Labels.Add（ 2/2012）; 
 xaxis.Labels.Add（ 2/2013）; 
 
 ColumnSeries s1 =新的ColumnSeries（）; 
 s1.IsStacked = false; 
 s1.Items.Add（new ColumnItem（1.2））; 
 s1.Items.Add（new ColumnItem（1.6））; 
 s1.Items.Add（new ColumnItem（1.4））; 
 s1.Items.Add（new ColumnItem（1.5））; 
 
 ColumnSeries s2 =新的ColumnSeries（）; 
 s2.IsStacked = false; 
 s2.Items.Add（new ColumnItem（1.5））; 
 s2.Items.Add（new ColumnItem（1.6））; 
 s2.Items.Add（new ColumnItem（1.1））; 
 s2.Items.Add（new ColumnItem（1.2））; 
 
 ColumnSeries s3 =新的ColumnSeries（）; 
 s3.IsStacked = false; 
 s3.Items.Add（new ColumnItem（1.2））; 
 s3.Items.Add（new ColumnItem（1.3））; 
 s3.Items.Add（new ColumnItem（1.4））; 
 s3.Items.Add（new ColumnItem（1.5））; 
 
 ColumnSeries s4 =新的ColumnSeries（）; 
 s4.IsStacked = false; 
 s4.Items.Add（new ColumnItem（1.5））; 
 s4.Items.Add（new ColumnItem（1.4））; 
 s4.Items.Add（new ColumnItem（1.3））; 
 s4.Items.Add（new ColumnItem（1.2））; 
 
 
 
 plotModel.Series.Add（s1）; 
 plotModel.Series.Add（s2）; 
 plotModel.Series.Add（s3）; 
 plotModel.Series.Add（s4）; 
 
 plotModel.Axes.Add（xaxis）; 
 plotModel.Axes.Add（new LinearAxis {Position = AxisPosition.Left，Minimum = 0，Maximum = 1.6}）; 
 
 _opv.Model = plotModel; 
内容= _opv； 
}

}
线性屏幕截图

线性代码

 公共部分类MainPage：ContentPage 
 {
 private PlotView _opv = new PlotView（）; 
 
 public MainPage（）
 {
 InitializeComponent（）; 
 
 var Points = new List< DataPoint> 
 {
 //DateTimeAxis.ToDouble(new DateTime（1989，10，3）），8）
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2018，10，15））， 0.75），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018、10、30）），0.75），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018、11、1））， 0.75），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018、11、15）），0.75），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018、12、1））， 0.75），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，12，15）），0.75），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2019，1，1））， 0.75），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2019，1，15）），0.75），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2019，1，31））， 0.75）
}; 
 var Points2 = new List< DataPoint> 
 {
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2018，10，15）），0.9），
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2018，10，30）） ），0.9），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，11，1）），0.9），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，11，15）） ），0.9），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，12，1）），1.0），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，12，15）） ），1.15），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2019，1，1）），1.0），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2019，1，15）） ），0.9），
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2019，1，31）），0.9）
}; 
 var Points3 = new List< DataPoint> 
 {
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2018，10，15）），1.42），
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2018，10，30） ），1.42），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，11，1）），1.42），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，11，15）） ），1.42），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，12，1）），1.5），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，12，15）） ），1.6），
新的DataPoint（DateTimeAxis.ToDouble（新的DateTime（2019，1，1）），1.41），
新的DataPoint（DateTimeAxis.ToDouble（新的DateTime（2019，1，15）） ），1.42），
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2019，1，31）），1.42）
}; 
 var Points4 = new List< DataPoint> 
 {
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2018，10，15）），1.57），
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2018，10，30） ），1.57），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，11，1）），1.57），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，11，15）） ），1.57），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，12，1）），1.57），
新DataPoint（DateTimeAxis.ToDouble（新DateTime（2018，12，15）） ），1.57），
新的DataPoint（DateTimeAxis.ToDouble（新的DateTime（2019，1，1）），1.57），
新的DataPoint（DateTimeAxis.ToDouble（新的DateTime（2019，1，15）） ），1.57），
 new DataPoint（DateTimeAxis.ToDouble（new DateTime（2019，1，31）），1.57）
}; 
 
 
 var m = new PlotModel（）; 
 m.PlotType = PlotType.XY; 
 m.InvalidatePlot（false）; 
 
 m.Title =你好氧; 
 
 
 var startDate = DateTime.Now.AddMonths（-3）; 
 var endDate = DateTime.Now; 
 
 var minValue = DateTimeAxis.ToDouble（startDate）; 
 var maxValue = DateTimeAxis.ToDouble（endDate）; 
 m.Axes.Add（new DateTimeAxis {Position = AxisPosition.Bottom，Minimum = minValue，Maximum = maxValue，StringFormat = MMM / yyyy}）; 
 m.Axes.Add（new LinearAxis {Position = AxisPosition.Left，Minimum = 0，Maximum = 1.6}）; 
 m.ResetAllAxes（）; 
 
 var ls1 = new LineSeries（）; 
 var ls2 = new LineSeries（）; 
 var ls3 = new LineSeries（）; 
 var ls4 = new LineSeries（）; 
 // MarkerType = OxyPlot.MarkerType.Circle，
 ls1.MarkerType = OxyPlot.MarkerType.Circle; 
 ls2.MarkerType = OxyPlot.MarkerType.Circle; 
 ls3.MarkerType = OxyPlot.MarkerType.Circle; 
 ls4.MarkerType = OxyPlot.MarkerType.Circle; 
 ls1.ItemsSource =点； 
 ls2.ItemsSource = Points2; 
 ls3.ItemsSource = Points3; 
 ls4.ItemsSource = Points4; 
 
 m.Series.Add（ls1）; 
 m.Series.Add（ls2）; 
 m.Series.Add（ls3）; 
 m.Series.Add（ls4）; 
 _opv =新的PlotView 
 {
 WidthRequest = 300，
 HeightRequest = 300，
 BackgroundColor = Color.White，
 
}; 
 _opv.Model = m; 
内容= _opv； 
}

如果您想了解有关PlotView的更多详细信息，可以参考此链接。

I must implement a linear and a bar chart whit multiple data entries in Xamarin.Forms, I have seen multiple plugins like Microcharts but I think that doesn't afford multiple entries and Syncfusion which affords it but is not free. Any free plugin to do it?

Example of the charts:

Bar Chart

Linear

解决方案

Based on your demand, You could use PlotView to achieve that .Before you used it, please refer to following link to initialize the OxyPlot,

http://docs.oxyplot.org/en/latest/getting-started/hello-xamarin-forms.html

I wrote a demo, you could refer to it.

Bar Chart screenshot

Bar Chart code

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BarGraphsDemo : ContentPage
{
    private PlotView _opv = new PlotView();
    public BarGraphsDemo ()
{
InitializeComponent ();

        var plotModel = new PlotModel { Title = "OxyPlot Demo" };
        CategoryAxis xaxis = new CategoryAxis();
        xaxis.Position = AxisPosition.Bottom;
        xaxis.MajorGridlineStyle = LineStyle.Solid;
        xaxis.MinorGridlineStyle = LineStyle.Dot;
        xaxis.Labels.Add("2/2010");
        xaxis.Labels.Add("2/2011");
        xaxis.Labels.Add("2/2012");
        xaxis.Labels.Add("2/2013");

        ColumnSeries s1 = new ColumnSeries();
        s1.IsStacked = false;
        s1.Items.Add(new ColumnItem(1.2));
        s1.Items.Add(new ColumnItem(1.6));
        s1.Items.Add(new ColumnItem(1.4));
        s1.Items.Add(new ColumnItem(1.5));

        ColumnSeries s2 = new ColumnSeries();
        s2.IsStacked = false;
        s2.Items.Add(new ColumnItem(1.5));
        s2.Items.Add(new ColumnItem(1.6));
        s2.Items.Add(new ColumnItem(1.1));
        s2.Items.Add(new ColumnItem(1.2));

        ColumnSeries s3 = new ColumnSeries();
        s3.IsStacked = false;
        s3.Items.Add(new ColumnItem(1.2));
        s3.Items.Add(new ColumnItem(1.3));
        s3.Items.Add(new ColumnItem(1.4));
        s3.Items.Add(new ColumnItem(1.5));

        ColumnSeries s4 = new ColumnSeries();
        s4.IsStacked = false;
        s4.Items.Add(new ColumnItem(1.5));
        s4.Items.Add(new ColumnItem(1.4));
        s4.Items.Add(new ColumnItem(1.3));
        s4.Items.Add(new ColumnItem(1.2));



        plotModel.Series.Add(s1);
        plotModel.Series.Add(s2);
        plotModel.Series.Add(s3);
        plotModel.Series.Add(s4);

        plotModel.Axes.Add(xaxis);
        plotModel.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Minimum = 0, Maximum = 1.6 });

        _opv.Model = plotModel;
        Content = _opv;
    }

}Linear screenshot

Linear code

   public partial class MainPage : ContentPage
{
    private PlotView _opv = new PlotView();

    public MainPage()
    {
        InitializeComponent();

        var Points = new List<DataPoint>
        {
            //DateTimeAxis.ToDouble(new DateTime(1989, 10, 3)), 8)
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 0.75)
        };
        var Points2 = new List<DataPoint>
        {
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 1.0),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 1.15),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 1.0),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 0.9)
        };
        var Points3 = new List<DataPoint>
        {
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 1.5),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 1.6),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 1.41),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 1.42)
        };
        var Points4 = new List<DataPoint>
        {
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 1.57)
        };


        var m = new PlotModel();
        m.PlotType = PlotType.XY;
        m.InvalidatePlot(false);

        m.Title = "hello oxy";


        var startDate = DateTime.Now.AddMonths(-3);
        var endDate = DateTime.Now;

        var minValue = DateTimeAxis.ToDouble(startDate);
        var maxValue = DateTimeAxis.ToDouble(endDate);
        m.Axes.Add(new DateTimeAxis { Position = AxisPosition.Bottom, Minimum = minValue, Maximum = maxValue, StringFormat = "MMM/yyyy" });
        m.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Minimum = 0, Maximum = 1.6 });
        m.ResetAllAxes();

        var ls1 = new LineSeries();
        var ls2 = new LineSeries();
        var ls3 = new LineSeries();
        var ls4 = new LineSeries();
        //MarkerType = OxyPlot.MarkerType.Circle,
        ls1.MarkerType = OxyPlot.MarkerType.Circle;
        ls2.MarkerType = OxyPlot.MarkerType.Circle;
        ls3.MarkerType = OxyPlot.MarkerType.Circle;
        ls4.MarkerType = OxyPlot.MarkerType.Circle;
        ls1.ItemsSource = Points;
        ls2.ItemsSource = Points2;
        ls3.ItemsSource = Points3;
        ls4.ItemsSource = Points4;

        m.Series.Add(ls1);
        m.Series.Add(ls2);
        m.Series.Add(ls3);
        m.Series.Add(ls4);
        _opv = new PlotView
        {
            WidthRequest = 300,
            HeightRequest = 300,
            BackgroundColor = Color.White,

        };
        _opv.Model = m;
        Content = _opv;
    }

If you want to know more details about PlotView, you could refer to this link.http://docs.oxyplot.org/en/latest/introduction/index.html

这篇关于Xamarin表单中具有多个条目的条形图/线性图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！