如何在 xamarin 表单中调整 MicroCharts-Barchart 的宽度和间距答案

【问题标题】：How to adjust width and spacing of MicroCharts-Barchart in xamarin forms如何在 xamarin 表单中调整 MicroCharts-Barchart 的宽度和间距
【发布时间】：2019-02-09 18:47:45
【问题描述】：

我正在使用 MicroCharts-Barchart 在 Xamarin 表单应用程序中实现图表。我想设置条的宽度以及条之间的间距，但我找不到任何属性来设置它

下面是我正在使用的代码 sn-p

Xaml

 <forms:ChartView x:Name="Chart4"  
                         HeightRequest="400"
                          />

.cs文件代码

public partial class ChartsPage : ContentPage
{

    List<Entry> entries = new List<Entry>
    {
        new Microcharts.Entry(200)
        {
            Color=SKColor.Parse("#FF1943"),
            Label ="January",
            ValueLabel = "200",

        },
        new Entry(400)
        {
            Color = SKColor.Parse("00BFFF"),
            Label = "March",
            ValueLabel = "400"
        },
        new Entry(-100)
        {
            Color =  SKColor.Parse("#00CED1"),
            Label = "Octobar",
            ValueLabel = "-100"
        },
        };
    public ChartsPage()
    {
        InitializeComponent();
        Chart4.Chart = new BarChart() { Entries = entries };
    }

 }

如下图所示

如果MicroCharts没有这个功能，请建议是否有其他库有这个功能。

【问题讨论】：

标签： xamarin charts xamarin.forms

【解决方案1】：

XAML：

您需要将 HorizontalOptions 设置为 StartAndExpand，如下所示：

<forms:ChartView x:Name="Chart4" HeightRequest="400" HorizontalOptions="StartAndExpand"/>

.cs 文件代码：

您需要设置图表的宽度 = NumberOfBars X BarWidth 如下：

public ChartsPage()
{
    InitializeComponent();
    Chart4.Chart = new BarChart() { Entries = entries };

    //Set the WidthRequest of your Chart based on the following calculation.
    //Here, barWidth will be the width of the Bar in your Chart
    int barWidth = 50;
    Chart4.WidthRequest = entries.Count * barWidth;
}

要设置条之间的间距，请使用 Margin，如下所示：

Chart4.Chart = new BarChart() { Entries = entries, Margin = 20 };

希望这会对您有所帮助。

【讨论】：