如何可能 Xamarin 形成垂直条形图?
How to possible Xamarin Forms Vertical Bar Charts?
在我的 xamarin 表单应用程序中,我使用的是 Oxyplot 条形图。 Here is the code,这在水平条的条件下对我有用,如何创建垂直图?有没有其他的条形图插件?
关键是使用 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;
}
}
这应该呈现如下图形:
在我的 xamarin 表单应用程序中,我使用的是 Oxyplot 条形图。 Here is the code,这在水平条的条件下对我有用,如何创建垂直图?有没有其他的条形图插件?
关键是使用 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;
}
}
这应该呈现如下图形: