Xamarin 为条形图形成 OxyPlot答案

【问题标题】：Xamarin Forms OxyPlot for Bar chartsXamarin 为条形图形成 OxyPlot
【发布时间】：2017-09-24 00:14:22
【问题描述】：

我正在开发 Xamarin.Forms 应用程序，我想在其中实现屏幕截图中所附的条形图。 Xamarin.Forms 中没有这样的控件，所以我为此使用了 OxyPlot nuget 包，但问题是 oxyplot 中的条是水平的，并且在图表中没有网格线选项。是否有任何条形图的开源库供我使用。

【问题讨论】：

您可以查看 Syncfusion Xamarin 控件，它不是开源的，但它有社区许可证syncfusion.com/products/xamarin。

标签： c# .net xaml xamarin.forms oxyplot

【解决方案1】：

您可以通过 OxyPlot 使用 ColumnSeries 来完成此操作。试试这个MCVE：

XAML：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App2"
             xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
             x:Class="App2.MainPage">

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

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

</ContentPage>

查看模型：

using OxyPlot;
using OxyPlot.Series;
using OxyPlot.Axes;

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

    public MyViewModel()
    {
        CategoryAxis xaxis = new CategoryAxis();
        xaxis.Position = AxisPosition.Bottom;
        xaxis.MajorGridlineStyle = LineStyle.Solid;
        xaxis.MinorGridlineStyle = LineStyle.Dot;
        xaxis.Labels.Add("Mon, 4/24");
        xaxis.Labels.Add("Tue, 4/25");
        xaxis.Labels.Add("Wed, 4/26");
        xaxis.Labels.Add("Thu, 4/27");

        LinearAxis yaxis = new LinearAxis();
        yaxis.Position = AxisPosition.Left;
        yaxis.MajorGridlineStyle = LineStyle.Dot;
        xaxis.MinorGridlineStyle = LineStyle.Dot;

        ColumnSeries s1 = new ColumnSeries();
        s1.IsStacked = true;
        s1.Items.Add(new ColumnItem(20));
        s1.Items.Add(new ColumnItem(60));
        s1.Items.Add(new ColumnItem(40));
        s1.Items.Add(new ColumnItem(50));

        ColumnSeries s2 = new ColumnSeries();
        s2.IsStacked = true;
        s2.Items.Add(new ColumnItem(50));
        s2.Items.Add(new ColumnItem(30));
        s2.Items.Add(new ColumnItem(10));
        s2.Items.Add(new ColumnItem(20));

        Model = new PlotModel();
        Model.Title = "Xamarin Oxyplot Sample";
        Model.Background = OxyColors.Gray;

        Model.Axes.Add(xaxis);
        Model.Axes.Add(yaxis);
        Model.Series.Add(s1);
        Model.Series.Add(s2);
    }
}

【讨论】：

感谢@jstreet，它可以工作，但是当我在stacklayout 中使用它时，图表不可见。 heightrequest 和 widthrequest 属性也没有反映任何变化。
如果您有新问题，请发布新问题！永远，永远向我们展示您的代码，而不仅仅是图片！

【解决方案2】：

我使用过这个优秀的开源库，它具有 Xamarin.iOS 和 Xamarin.Android 的绑定，您必须执行自定义渲染器才能在 Xamarin.Forms 上显示图表，但它是高度可定制的：

安卓： https://github.com/PhilJay/MPAndroidChart

iOS： https://github.com/danielgindi/Charts

Xamarin 安卓： https://github.com/Flash3001/MPAndroidChart.Xamarin

Xamarin iOS： https://github.com/Flash3001/iOSCharts.Xamarin

它们以 NuGet 包的形式提供。

【讨论】：