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

Question

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

图表示例：

Bar Chart

Linear

Answer 1

根据您的需求，您可以使用 PlotView 来实现。在您使用它之前，请参考以下链接来初始化 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 的详细信息，可以参考此链接。 http://docs.oxyplot.org/en/latest/introduction/index.html