Xamarin如何形成垂直条形图?

时间:2017-05-25 06:22:49

标签: charts xamarin.forms oxyplot

在我的xamarin表单应用程序中,我使用的是Oxyplot条形图。 Here is the code,这对我来说在水平条纹的条件下工作,如何创建垂直图形?条形图有没有其他插件?

1 个答案:

答案 0 :(得分:3)

关键是使用带有ColumnSeries个对象的ColumnItem。这应该呈现为具有垂直方向条的条形图。如果您创建新的ContentPage并将下面的代码粘贴到其中,则可以看到它的实际效果。我在代码示例下面附加了一个图像,详细说明了它在iOS上的外观。

public partial class DemoPage : ContentPage
{
    public DemoPage()
    {
        InitializeComponent();

        var model = new PlotModel { Title = "Cake Type Popularity" };

        // generate a random percentage distribution between the 5
        //cake-types (see axis below)
        var rand = new Random();
        double[] cakePopularity = new double[5];
        for (int i = 0; i < 5; ++i)
        {
            cakePopularity[i] = rand.NextDouble();
        }
        var sum = cakePopularity.Sum();

        var barSeries = new ColumnSeries
        {

            ItemsSource = new List<ColumnItem>(new[]
            {
                new ColumnItem{ Value = (cakePopularity[0] / sum * 100) },
                new ColumnItem{ Value = (cakePopularity[1] / sum * 100) },
                new ColumnItem{ Value = (cakePopularity[2] / sum * 100) },
                new ColumnItem{ Value = (cakePopularity[3] / sum * 100) },
                new ColumnItem{ Value = (cakePopularity[4] / sum * 100) }
            }),
            LabelPlacement = LabelPlacement.Inside,
            LabelFormatString = "{0:.00}%"
        };

        model.Series.Add(barSeries);

        model.Axes.Add(new CategoryAxis
        {
            Position = AxisPosition.Bottom,

            Key = "CakeAxis",
            ItemsSource = new[]
            {
                "A",
                "B",
                "C",
                "D",
                "E"
            }
        });

        var grid = new Grid();

        grid.Children.Add(new PlotView
        {
            Model = model,
            VerticalOptions = LayoutOptions.Center,
            HeightRequest = 200,
            HorizontalOptions = LayoutOptions.Fill,
        });

        Content = grid;
    }
}

这应该呈现如下图形:

Graph with ColumnSeries