如何在Syncfusion饼图中显示百分比图例

你之前尝试的series.dataMarker.labelContent = SFChartLabelContentPercentage是用于设置饼图数据标签（饼块旁的文字）的显示格式，并非图例的文本格式，所以没达到预期效果。要让图例显示百分比，需要通过legendTextMapper自定义图例文本，步骤如下：

1. 先计算所有数据项的总数值
   在你的控制器controller中先计算总和：

   double totalSum = controller.displyDataList.fold(0, (sum, item) => sum + item.toatal);
   

2. 在PieSeries中添加legendTextMapper属性
   该属性用于自定义图例显示文本，将分类名称与百分比组合返回：

修改后的完整PieSeries代码：

series: <CircularSeries>[
  PieSeries<CatChartData, String>(
      animationDuration: 700,
      dataSource: controller.displyDataList,
      explode: true,
      explodeGesture: ActivationMode.singleTap,
      xValueMapper: (CatChartData data, _) => data.category,
      yValueMapper: (CatChartData data, _) => data.toatal,
      // 自定义图例文本：分类名 + 百分比
      legendTextMapper: (CatChartData data, _) {
        double percentage = (data.toatal / totalSum) * 100;
        return '${data.category} (${percentage.toStringAsFixed(1)}%)';
      },
      dataLabelMapper: (CatChartData data, _) => data.category,
      sortingOrder: SortingOrder.descending,
      legendIconType: LegendIconType.circle,
      dataLabelSettings: const DataLabelSettings(
        isVisible: true,
        connectorLineSettings:
            ConnectorLineSettings(type: ConnectorType.curve),
        overflowMode: OverflowMode.shift,
        showZeroValue: false,
        labelPosition: ChartDataLabelPosition.outside,
      ))
],

如果需要让饼图上的数据标签也显示百分比，可在dataLabelSettings中补充配置：

dataLabelSettings: DataLabelSettings(
  isVisible: true,
  labelContent: LabelContent.percentage, // 设置数据标签显示百分比
  connectorLineSettings: const ConnectorLineSettings(type: ConnectorType.curve),
  overflowMode: OverflowMode.shift,
  showZeroValue: false,
  labelPosition: ChartDataLabelPosition.outside,
)

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