Flutter使用charts_flutter绘制饼图时标签无法正常显示的解决方案求助

方案1：调整扇形渲染器标签配置 #

修改 ArcRendererConfig 相关参数，开启标签自动避让和外显逻辑：

charts.ArcRendererConfig(
  arcRendererDecorators: [
    charts.ArcLabelDecorator(
      // 标签设置为外部展示，避免内部空间不足被裁剪
      labelPosition: charts.ArcLabelPosition.outside,
      // 标签超出边界时自动调整位置
      autoAdjustLabelPosition: true,
      // 配置引线参数，避免引线过短
      leaderLineStyle: charts.ArcLabelLeaderLineStyle(
        length: 12,
        thickness: 1,
      ),
      minimumPadding: 2,
    )
  ],
  // 缩小饼图占比，预留更多外部空间放标签
  arcRatio: 0.5,
)

方案2：调整全局布局边距 #

给饼图组件增加边距配置，避免外部标签被父容器裁剪：

charts.PieChart(
  seriesList,
  animate: true,
  // 自定义布局边距，右侧多留空间给标签
  layoutConfig: charts.LayoutConfig(
    leftMarginSpec: charts.MarginSpec.fixedPixel(30),
    rightMarginSpec: charts.MarginSpec.fixedPixel(90),
    topMarginSpec: charts.MarginSpec.fixedPixel(20),
    bottomMarginSpec: charts.MarginSpec.fixedPixel(20),
  ),
)

方案3：自定义标签内容适配 #

针对占比过小的扇区优化标签内容，避免文本过长导致重叠、裁剪：

charts.Series<你的数据类, String>(
  id: 'pieData',
  domainFn: (data, _) => data.category,
  measureFn: (data, _) => data.value,
  // 自定义标签生成逻辑
  labelAccessorFn: (data, _) {
    double percent = data.value / 总数值 * 100;
    // 占比小于3%的扇区只显示百分比，省略长文本
    if (percent < 3) return '${percent.toStringAsFixed(1)}%';
    return '${data.category}: ${percent.toStringAsFixed(1)}%';
  },
)

方案4：开启重叠自动隐藏 #

如果标签重叠导致显示异常，开启重叠隐藏策略：

charts.ArcLabelDecorator(
  labelPosition: charts.ArcLabelPosition.outside,
  overlapStrategy: charts.OverlapStrategy.hide,
  showLeaderLines: true,
)

内容的提问来源于stack exchange，提问作者Phu Phan