Flutter图表：如何在柱状图内部显示数值？

我使用Flutter图表库，希望在柱状图内部显示数值（类似示例图效果），但尝试以下代码后未生效：

labelAnchor: charts.BarLabelAnchor.middle,
labelPosition: charts.BarLabelPosition.inside,
outsideLabelStyleSpec: new charts.TextStyleSpec(
    fontSize: 12, color: charts.ColorUtil.fromDartColor(Colors.red)),
insideLabelStyleSpec: new charts.TextStyleSpec(
    fontSize: 12, color: charts.ColorUtil.fromDartColor(Colors.red))),

关键修复步骤： #

1. 正确配置BarLabelDecorator
   必须将标签装饰器作为BarChart的barRendererDecorator参数传入，而非仅在系列配置中设置。完整示例代码：

   charts.BarChart(
     _createSampleData(),
     animate: true,
     // 核心：添加柱状图标签装饰器
     barRendererDecorator: charts.BarLabelDecorator<String>(
       labelAnchor: charts.BarLabelAnchor.middle,
       labelPosition: charts.BarLabelPosition.inside,
       insideLabelStyleSpec: charts.TextStyleSpec(
         fontSize: 12,
         color: charts.ColorUtil.fromDartColor(Colors.white),
       ),
     ),
   )
   

2. 为系列添加labelAccessorFn
   系列必须指定labelAccessorFn来提供要显示的数值，否则标签无内容：

   charts.Series<SalesData, String>(
     id: 'Sales',
     domainFn: (SalesData data, _) => data.product,
     measureFn: (SalesData data, _) => data.sales,
     // 必须配置这个方法返回要显示的数值文本
     labelAccessorFn: (SalesData data, _) => '${data.sales}',
     data: [
       SalesData('A', 100),
       SalesData('B', 200),
       SalesData('C', 150),
     ],
   )
   

3. 其他注意事项

   • 确保柱状图高度足够，避免内部标签被裁剪
   • 根据柱状图背景色调整标签颜色（比如深色柱子用浅色标签）
   • 若使用多系列，需确保customSeriesRenderers与系列的rendererId匹配

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