Flutter饼图：如何同时添加内外标签并让所有项显示外部标签

在使用Flutter的charts_flutter库绘制饼图时，试图同时显示内部标签与外部标签，但仅单个数据项显示外部标签，其余项无外部标签，不符合预期效果。

原问题代码 #

new charts.Series<LinearSales, int>(
  id: 'Sales',
  domainFn: (LinearSales sales, _) => sales.year,
  measureFn: (LinearSales sales, _) => sales.sales,
  colorFn: (sale, __) => charts.Color.fromHex(code: sale.colorCode),
  // fillColorFn: (LinearSales sales, _) =>
  //     charts.ColorUtil.fromDartColor(Color(0xFFFFB8D8)),
  data: dataToShow,
  labelAccessorFn: (LinearSales row, _) => '${row.sales}',
)

charts.PieChart<Object>(
  widget.viewModel.chartData,
  defaultInteractions: true,
  animate: false,
  behaviors: [
    charts.DomainHighlighter(),
  ],
  defaultRenderer: new charts.ArcRendererConfig(
    arcWidth: 60,
    arcRendererDecorators: [new charts.ArcLabelDecorator(
      outsideLabelStyleSpec: 
       new charts.TextStyleSpec(
        fontSize: 12,
        fontFamily: 'Montserrat',
        color: charts.Color.fromHex(code: "#FFFFFF"),
      ),
    )]
  ),
)

修复方案 #

要让所有数据项都显示外部标签，核心是为ArcLabelDecorator明确指定外部标签的内容获取逻辑，同时区分内外标签的配置：

1. 在ArcLabelDecorator中添加outsideLabelAccessorFn，为每个数据项返回对应的外部标签文本
2. 可通过insideLabelStyleSpec单独定制内部标签样式（按需添加）

修改后的完整代码 #

// Series配置
new charts.Series<LinearSales, int>(
  id: 'Sales',
  domainFn: (LinearSales sales, _) => sales.year,
  measureFn: (LinearSales sales, _) => sales.sales,
  colorFn: (sale, __) => charts.Color.fromHex(code: sale.colorCode),
  data: dataToShow,
  // 内部标签内容（如数值）
  labelAccessorFn: (LinearSales row, _) => '${row.sales}',
)

// PieChart配置
charts.PieChart<Object>(
  widget.viewModel.chartData,
  defaultInteractions: true,
  animate: false,
  behaviors: [charts.DomainHighlighter()],
  defaultRenderer: new charts.ArcRendererConfig(
    arcWidth: 60,
    arcRendererDecorators: [
      new charts.ArcLabelDecorator(
        // 外部标签样式
        outsideLabelStyleSpec: new charts.TextStyleSpec(
          fontSize: 12,
          fontFamily: 'Montserrat',
          color: charts.Color.fromHex(code: "#FFFFFF"),
        ),
        // 关键：为每个数据项指定外部标签内容
        outsideLabelAccessorFn: (LinearSales row, _) => '${row.year}: ${row.sales}',
        // 内部标签样式（按需配置）
        insideLabelStyleSpec: new charts.TextStyleSpec(
          fontSize: 10,
          color: charts.Color.fromHex(code: "#000000"),
        ),
      )
    ]
  ),
)

关键说明 #

• outsideLabelAccessorFn是实现全量外部标签的核心，必须确保每个数据项都能返回非空的标签文本，否则库默认只会为占比最大的扇形显示外部标签
• 内外标签的内容可根据需求自定义，比如外部标签显示分类+数值，内部标签仅显示数值
• 确保dataToShow中的每个数据对象都包含用于生成标签的字段（如示例中的year和sales）

内容的提问来源于stack exchange，提问作者Muhammed Ajmal