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

StackLayout内的ChartView图表被截断,如何解决?

解决DonutChart被截断的问题

结合你的代码和描述,只显示饼图水平中间部分的情况,通常是图表控件的尺寸计算或布局约束出了问题,试试下面这些针对性的解决办法:

1. 匹配饼图的圆形宽高比例

饼图是基于正方形区域绘制的,你只给ChartView设置了HeightRequest=80但没限制宽度,布局系统可能会让它拉伸到容器宽度,导致绘制区域被挤压变形或截断。给ChartView加上WidthRequest,保证宽高一致:

ChartView Chart1 = new ChartView {
    VerticalOptions = LayoutOptions.CenterAndExpand,
    HeightRequest = 80,
    WidthRequest = 80, // 新增,和HeightRequest保持一致
    HorizontalOptions = LayoutOptions.Center // 让图表居中,避免不必要的拉伸
};

2. 修正HoleRadius的取值范围

很多饼图库的HoleRadius是0到1之间的百分比值,你设置的5明显超出了控件的预期范围,可能导致绘制逻辑异常。试着改成0-1之间的数值:

Chart1.Chart = new DonutChart() {
    Entries = entries,
    HoleRadius = 0.5f // 改成0.5,代表中间孔洞占半径的50%
};

3. 调整布局约束,让图表获得足够绘制空间

确认_contentStack是垂直方向的StackLayout,给ChartView设置更明确的布局选项,确保它能正确获取绘制空间:

ChartView Chart1 = new ChartView {
    VerticalOptions = LayoutOptions.FillAndExpand,
    HorizontalOptions = LayoutOptions.Fill, // 占满容器宽度
    HeightRequest = 80
};

如果移除Label和Button后还是截断,说明问题不在其他控件,而是ChartView自身或DonutChart的尺寸计算逻辑。这时候可以尝试去掉HeightRequest,让控件自行测量所需尺寸,或者强制触发布局刷新:

// 赋值Chart后强制刷新布局
Chart1.Chart = new DonutChart() { Entries = entries, HoleRadius = 0.5f };
Chart1.ForceLayout();

4. 排除透明Entry的影响

你第二个Entry设置了SKColors.Transparent,透明条目可能干扰图表的布局计算逻辑。试着换成可见颜色测试,排除这个因素:

List<Entry> entries = new List<Entry> { 
    new Entry(7) { Color = SKColor.Parse("#166DA3") }, 
    new Entry(3) { Color = SKColors.LightGray } // 替换透明色
};

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.05.08 20:23:14