Flutter DChart：如何合并图表中重复的域为单个域？

d_chart本身没有内置处理重复domain的配置项，要实现同一域对应measure值相加的效果，需要先预处理原始数据，合并相同domain的数值后再传给图表组件。

步骤1：编写数据合并函数 #

这个函数会遍历原始数据，累计相同domain的measure值，最后转换成图表所需的格式：

List<Map<String, dynamic>> mergeDuplicateDomains(List<Map<String, dynamic>> rawData) {
  final Map<String, double> domainMeasureMap = {};
  
  for (final dataItem in rawData) {
    final String domain = dataItem['domain'] as String;
    final double measure = (dataItem['measure'] as num).toDouble();
    
    if (domainMeasureMap.containsKey(domain)) {
      // 已有该域，累加数值
      domainMeasureMap[domain] = domainMeasureMap[domain]! + measure;
    } else {
      // 首次出现该域，初始化数值
      domainMeasureMap[domain] = measure;
    }
  }
  
  // 将Map转换为图表所需的List格式
  return domainMeasureMap.entries.map((entry) {
    return {'domain': entry.key, 'measure': entry.value};
  }).toList();
}

步骤2：修改图表代码，使用处理后的数据 #

把原始数据传入合并函数，得到处理后的数据集再渲染图表：

// 原始未处理的数据
final rawChartData = [
  {'domain': '2020', 'measure': 3},
  {'domain': '2021', 'measure': 4},
  {'domain': '2021', 'measure': 6},
  {'domain': '2023', 'measure': 0.3},
];

// 处理后的数据，重复domain的measure已累加
final processedChartData = mergeDuplicateDomains(rawChartData);

DChartBar(
  data: [
    {
      'id': 'Bar',
      'data': processedChartData,
    },
  ],
  domainLabelPaddingToAxisLine: 16,
  axisLineTick: 2,
  axisLinePointTick: 2,
  axisLinePointWidth: 10,
  axisLineColor: Colors.green,
  measureLabelPaddingToAxisLine: 16,
  barColor: (barData, index, id) => Colors.green,
  showBarValue: true,
),

这样处理后，图表中2021对应的measure值会合并为10，显示为单个柱子。

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