You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET MAUI中如何修改Syncfusion饼图扇区颜色?

在.NET MAUI中通过XAML设置SfCircularChart饼图扇区颜色

方法1:直接配置PaletteBrushes(静态固定颜色)

这是最简便的前端修改方式,直接在XAML的PieSeries标签内定义PaletteBrushes集合,按数据项顺序指定每个扇区的颜色:

<chart:SfCircularChart>
    <chart:PieSeries ItemsSource="{Binding ProjectData}"
                     XBindingPath="Project"
                     YBindingPath="Amount"
                     StartAngle="180"
                     EndAngle="360">
        <!-- 工具提示配置 -->
        <chart:PieSeries.TooltipSettings>
            <chart:TooltipSettings Enable="True"/>
        </chart:PieSeries.TooltipSettings>
        
        <!-- 自定义扇区颜色集合 -->
        <chart:PieSeries.PaletteBrushes>
            <SolidColorBrush Color="#FF6384"/>
            <SolidColorBrush Color="#36A2EB"/>
            <SolidColorBrush Color="#FFCE56"/>
            <SolidColorBrush Color="#4BC0C0"/>
            <!-- 颜色数量不足时,会循环使用已有颜色 -->
        </chart:PieSeries.PaletteBrushes>
    </chart:PieSeries>
</chart:SfCircularChart>

方法2:绑定数据模型颜色字段(动态适配)

如果需要根据数据项动态分配颜色,可以给ProjectData模型新增一个Color类型的属性,比如SectorColor,再通过PointColorMapping绑定:

  1. 数据模型示例:
public class ProjectData
{
    public string Project { get; set; }
    public double Amount { get; set; }
    public Color SectorColor { get; set; }
}
  1. XAML配置:
<chart:SfCircularChart>
    <chart:PieSeries ItemsSource="{Binding ProjectData}"
                     XBindingPath="Project"
                     YBindingPath="Amount"
                     StartAngle="180"
                     EndAngle="360"
                     PointColorMapping="SectorColor">
        <chart:PieSeries.TooltipSettings>
            <chart:TooltipSettings Enable="True"/>
        </chart:PieSeries.TooltipSettings>
    </chart:PieSeries>
</chart:SfCircularChart>

这种方式下,每个数据项的扇区颜色会直接匹配模型中SectorColor的取值,适合需要动态变色的场景。

内容的提问来源于stack exchange,提问作者isla_just

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.20 15:45:45