SfChart BarSeries不同条形颜色、轴标签及自定义图例问题

针对你用BarSeries展示2名员工销售数据遇到的三个问题，以下是具体解决方法：

一、双系列方案（推荐）：解决X轴标签合并+间距+自定义图例 #

核心调整点 #

1. 给每个Series设置唯一员工名称作为Label，关联图例
2. 自定义X轴标签模板实现分行，调整条形间距
3. 启用内置图例并定位到标题下方左上角

完整XAML代码 #

<chart:SfChart BackgroundColor="{StaticResource BiscayBlueColor}" HeightRequest="300">
    <!-- 图表标题 -->
    <chart:SfChart.Title>
        <chart:ChartTitle Text="{markupExtensions:Translate TitleSalesByCategory}" 
                          TextColor="White" FontAttributes="Bold" />
    </chart:SfChart.Title>

    <!-- 自定义图例：标题下方左上角 -->
    <chart:SfChart.Legend>
        <chart:ChartLegend Position="TopLeft" 
                           BackgroundColor="Transparent"
                           TextColor="White"
                           FontAttributes="Bold">
            <chart:ChartLegend.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" Spacing="5">
                        <BoxView WidthRequest="15" HeightRequest="15" 
                                 Color="{Binding IconColor}" />
                        <Label Text="{Binding Text}" TextColor="White" />
                    </StackLayout>
                </DataTemplate>
            </chart:ChartLegend.ItemTemplate>
        </chart:ChartLegend>
    </chart:SfChart.Legend>

    <!-- X轴：分类轴 -->
    <chart:SfChart.PrimaryAxis>
        <chart:CategoryAxis>
            <chart:CategoryAxis.MajorTickStyle>
                <chart:ChartAxisTickStyle TickSize="0" />
            </chart:CategoryAxis.MajorTickStyle>
            <chart:CategoryAxis.LabelStyle>
                <chart:ChartAxisLabelStyle TextColor="White" 
                                          LineBreakMode="WordWrap"
                                          FontSize="12">
                    <!-- 自定义标签模板，支持分行显示 -->
                    <chart:ChartAxisLabelStyle.AxisLabelTemplate>
                        <DataTemplate>
                            <Label Text="{Binding Content}" 
                                   TextColor="White" 
                                   LineBreakMode="WordWrap"
                                   HorizontalTextAlignment="Center" />
                        </DataTemplate>
                    </chart:ChartAxisLabelStyle.AxisLabelTemplate>
                </chart:ChartAxisLabelStyle>
                <!-- 若标签仍合并，启用此属性强制按索引生成标签 -->
                <!-- <chart:CategoryAxis.IsIndexed>True</chart:CategoryAxis.IsIndexed> -->
            </chart:CategoryAxis.LabelStyle>
        </chart:CategoryAxis>
    </chart:SfChart.PrimaryAxis>

    <!-- Y轴：数值轴 -->
    <chart:SfChart.SecondaryAxis>
        <chart:NumericalAxis>
            <chart:NumericalAxis.MajorTickStyle>
                <chart:ChartAxisTickStyle TickSize="0" />
            </chart:NumericalAxis.MajorTickStyle>
            <chart:NumericalAxis.LabelStyle>
                <chart:ChartAxisLabelStyle TextColor="White" />
            </chart:NumericalAxis.LabelStyle>
        </chart:NumericalAxis>
    </chart:SfChart.SecondaryAxis>

    <!-- 员工A的条形系列 -->
    <chart:BarSeries ItemsSource="{Binding BarGraphData1}" 
                     Color="White" 
                     StrokeWidth="5" 
                     Label="员工A"
                     XBindingPath="XAxisValue" 
                     YBindingPath="YAxisValue"
                     Gap="0.2"  <!-- 不同类别条形间距 -->
                     Spacing="0.1"> <!-- 同类别内条形间距 -->
    </chart:BarSeries>

    <!-- 员工B的条形系列 -->
    <chart:BarSeries ItemsSource="{Binding BarGraphData2}" 
                     Color="Green" 
                     StrokeWidth="5" 
                     Label="员工B"
                     XBindingPath="XAxisValue" 
                     YBindingPath="YAxisValue"
                     Gap="0.2"
                     Spacing="0.1">
    </chart:BarSeries>
</chart:SfChart>

二、单系列方案：实现不同条形颜色 #

如果坚持用单Series展示，需在数据模型中添加颜色字段，通过自定义模板绑定颜色：

1. 数据模型添加颜色属性 #

public class SalesData
{
    public string XAxisValue { get; set; } // 员工名称/销售类别
    public double YAxisValue { get; set; } // 销售额
    public Color BarColor { get; set; }    // 条形颜色
}

2. XAML代码调整 #

<chart:SfChart BackgroundColor="{StaticResource BiscayBlueColor}" HeightRequest="300">
    <chart:SfChart.Title>
        <StackLayout Orientation="Vertical">
            <chart:ChartTitle Text="{markupExtensions:Translate TitleSalesByCategory}" 
                              TextColor="White" FontAttributes="Bold" />
            <!-- 手动添加自定义图例 -->
            <StackLayout Orientation="Horizontal" Spacing="15" Margin="10,5,0,0">
                <StackLayout Orientation="Horizontal" Spacing="5">
                    <BoxView WidthRequest="15" HeightRequest="15" Color="White" />
                    <Label Text="员工A" TextColor="White" FontSize="12" />
                </StackLayout>
                <StackLayout Orientation="Horizontal" Spacing="5">
                    <BoxView WidthRequest="15" HeightRequest="15" Color="Green" />
                    <Label Text="员工B" TextColor="White" FontSize="12" />
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </chart:SfChart.Title>

    <!-- 轴设置同双系列方案 -->
    <chart:SfChart.PrimaryAxis>
        <chart:CategoryAxis>
            <chart:CategoryAxis.MajorTickStyle>
                <chart:ChartAxisTickStyle TickSize="0" />
            </chart:CategoryAxis.MajorTickStyle>
            <chart:CategoryAxis.LabelStyle>
                <chart:ChartAxisLabelStyle TextColor="White" 
                                          LineBreakMode="WordWrap" />
            </chart:CategoryAxis.LabelStyle>
        </chart:CategoryAxis>
    </chart:SfChart.PrimaryAxis>

    <chart:SfChart.SecondaryAxis>
        <chart:NumericalAxis>
            <chart:NumericalAxis.MajorTickStyle>
                <chart:ChartAxisTickStyle TickSize="0" />
            </chart:NumericalAxis.MajorTickStyle>
            <chart:NumericalAxis.LabelStyle>
                <chart:ChartAxisLabelStyle TextColor="White" />
            </chart:NumericalAxis.LabelStyle>
        </chart:NumericalAxis>
    </chart:SfChart.SecondaryAxis>

    <!-- 单Series绑定颜色字段 -->
    <chart:BarSeries ItemsSource="{Binding BarGraphData}" 
                     XBindingPath="XAxisValue" 
                     YBindingPath="YAxisValue">
        <chart:BarSeries.ItemTemplate>
            <DataTemplate>
                <chart:BarSegment Fill="{Binding BarColor}" StrokeWidth="5" />
            </DataTemplate>
        </chart:BarSeries.ItemTemplate>
    </chart:BarSeries>
</chart:SfChart>

内容的提问来源于stack exchange，提问作者Afsal T