Bar/Linear Xamarin Forms 中包含多个条目的图表

Question

我必须在 Xamarin.Forms 中实现包含多个数据条目的线性图和条形图，我见过多个插件，例如 Microcharts，但我认为它不能提供多个条目，而 Syncfusion 可以提供但不能自由的。有免费的插件吗？

图表示例：

Bar Chart

Linear

Answer 1

根据您的需求，您可以使用PlotView来实现。在使用之前，请参考以下link初始化OxyPlot，

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

我写了一个demo，你可以参考一下

条形图屏幕截图

条形图代码

[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;
    }

} 线性截图

线性码

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

如果你想了解更多关于PlotView的细节，你可以参考这个link。 http://docs.oxyplot.org/en/latest/introduction/index.html

Bar/Linear Xamarin Forms 中包含多个条目的图表

Bar/Linear chart with multiple entries in Xamarin Forms

charts

linechart

bar-chart

xamarin.forms