Flutter基于fl_chart实现按年龄分组的性别占比柱状图技术求助

首先，你的核心需求是按年龄分组，每个年龄下展示三个性别（M/F/U）的占比柱状图，所以第一步必须先完成数据的聚合整理，再基于整理后的数据生成图表组。下面分步骤帮你实现：

1. 数据预处理：按年龄+性别聚合百分比 #

首先我们需要把原始数据转换成Map<String, Map<String, double>>结构，key是年龄区间（age），value是该年龄下各性别的百分比（M/F/U）。如果某个性别在该年龄下没有数据，默认设为0.0，避免柱子缺失。

// 替换成你实际的数据模型类名
Map<String, Map<String, double>> aggregateAgeGenderData(List<YourDataModel> rawData) {
  final aggregatedData = <String, Map<String, double>>{};
  
  // 先初始化所有年龄组的三个性别默认值为0
  for (final item in rawData) {
    aggregatedData.putIfAbsent(item.age!, () => {'M': 0.0, 'F': 0.0, 'U': 0.0});
  }
  
  // 遍历原始数据，填充对应性别百分比
  for (final item in rawData) {
    final ageGroup = aggregatedData[item.age!]!;
    ageGroup[item.gender!] = double.parse(item.percent!);
  }
  
  return aggregatedData;
}

2. 生成BarChartGroupData列表 #

基于聚合后的数据，我们为每个年龄区间生成一个BarChartGroupData，每个group里包含三个BarChartRodData，分别对应M、F、U三个性别：

List<BarChartGroupData> barGroups() {
  final rawData = genderAgeData.genderAgeList;
  final aggregatedData = aggregateAgeGenderData(rawData);
  
  // 对年龄区间排序，保证X轴显示逻辑顺序（比如从年轻到年长）
  final sortedAges = aggregatedData.keys.toList()..sort((a, b) {
    // 自定义排序逻辑，适配你的年龄区间格式
    final ageOrder = ["13-17", "18-24", "25-34", "35-44", "45-54", "55-64", "65+"];
    return ageOrder.indexOf(a) - ageOrder.indexOf(b);
  });
  
  return sortedAges.asMap().map((index, age) {
    final genderPercentages = aggregatedData[age]!;
    return MapEntry(index, BarChartGroupData(
      x: index,
      barsSpace: 4, // 同组内柱子的间距
      barRods: [
        BarChartRodData(
          toY: genderPercentages['M']!,
          color: masculineColor, // 你的男性颜色变量
          width: 8, // 柱子宽度
        ),
        BarChartRodData(
          toY: genderPercentages['F']!,
          color: Colors.pinkAccent, // 替换成女性对应颜色
          width: 8,
        ),
        BarChartRodData(
          toY: genderPercentages['U']!,
          color: Colors.grey, // 替换成未知性别对应颜色
          width: 8,
        ),
      ],
      showingTooltipIndicators: [0,1,2], // 三个柱子都显示tooltip
    ));
  }).values.toList();
}

3. 配置X轴显示年龄标签 #

为了让X轴正确显示对应的年龄区间，需要在BarChartData的titlesData里配置：

BarChartData(
  // ...其他图表配置（比如网格、边框等）
  titlesData: FlTitlesData(
    bottomTitles: AxisTitles(
      sideTitles: SideTitles(
        showTitles: true,
        reservedSize: 30, // 预留X轴标签的高度
        getTitlesWidget: (value, meta) {
          final sortedAges = aggregatedData.keys.toList()..sort((a, b) {
            final ageOrder = ["13-17", "18-24", "25-34", "35-44", "45-54", "55-64", "65+"];
            return ageOrder.indexOf(a) - ageOrder.indexOf(b);
          });
          if (value.toInt() >= 0 && value.toInt() < sortedAges.length) {
            return Text(
              sortedAges[value.toInt()],
              style: const TextStyle(fontSize: 10),
            );
          }
          return const Text('');
        },
      ),
    ),
    // 隐藏其他不需要的轴标签
    leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
    topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
    rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
  ),
)

关键说明 #

• 数据聚合是核心：你之前的问题根源在于没有把同一年龄下的多性别数据整合，导致每个原始数据条目单独生成了柱子，聚合后才能实现每个X轴位置对应三个柱子的需求。
• 排序逻辑：自定义的ageOrder列表可以保证X轴年龄按从年轻到年长的逻辑顺序显示，避免字符串排序带来的混乱。
• 缺失值处理：通过初始化每个年龄组的三个性别为0.0，确保即使某个性别没有数据，也会显示高度为0的柱子，保证图表结构统一。

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