Flutter Dart中Syncfusion实现人口金字塔图表的优化及替代方案

方案一：处理现有负数数据，让轴和标签显示正数 #

如果你已经用了堆叠柱状图并把其中一个系列设为负数，可以通过自定义轴标签和数据标签的方式，把显示内容转为正数：

1. 修改轴数值显示
   在对应的数值轴（比如X轴或Y轴）中，通过labelFormatter回调将负数转为绝对值显示：

   SfCartesianChart(
     primaryXAxis: NumericAxis(
       labelFormatter: (AxisLabelRenderDetails details) {
         final numValue = double.parse(details.text);
         return ChartAxisLabel(numValue.abs().toString(), details.textStyle);
       },
     ),
     // 其他图表配置
   )
   

2. 修改数据标签显示
   在负数数据的系列里，自定义数据标签的builder，将负数转为正数展示：

   StackedColumnSeries<PopulationData, String>(
     dataSource: maleNegativeData,
     xValueMapper: (data, _) => data.ageGroup,
     yValueMapper: (data, _) => -data.count, // 存储为负数
     dataLabelSettings: DataLabelSettings(
       isVisible: true,
       builder: (data, point, series, pointIndex, seriesIndex) {
         return Text((-point.y).toString()); // 取绝对值显示正数
       },
     ),
   )
   

方案二：直接用双轴柱状图实现（更推荐） #

其实不用转负数，通过Syncfusion的双轴配置就能直接做出标准的人口金字塔：

• 左侧显示男性数据，使用默认Y轴
• 右侧显示女性数据，绑定一个对立位置的Y轴

示例代码：

// 先定义数据模型
class PopulationData {
  final String ageGroup;
  final int count;
  PopulationData(this.ageGroup, this.count);
}

// 图表实现
SfCartesianChart(
  primaryXAxis: CategoryAxis(
    categories: ["0-10", "11-20", "21-30", "31-40", "41-50"], // 年龄分组
    labelRotation: 45,
  ),
  // 添加右侧对立Y轴，用于女性数据
  axes: [
    NumericAxis(
      opposedPosition: true,
      name: 'femaleAxis',
      title: AxisTitle(text: '女性人口'),
    ),
  ],
  primaryYAxis: NumericAxis(
    title: AxisTitle(text: '男性人口'),
  ),
  series: [
    // 男性系列（左侧）
    ColumnSeries<PopulationData, String>(
      dataSource: [
        PopulationData("0-10", 1200),
        PopulationData("11-20", 1500),
        PopulationData("21-30", 1800),
        PopulationData("31-40", 1600),
        PopulationData("41-50", 1300),
      ],
      xValueMapper: (data, _) => data.ageGroup,
      yValueMapper: (data, _) => data.count,
      color: Colors.blueAccent,
      dataLabelSettings: DataLabelSettings(isVisible: true),
    ),
    // 女性系列（右侧，绑定对立Y轴）
    ColumnSeries<PopulationData, String>(
      dataSource: [
        PopulationData("0-10", 1100),
        PopulationData("11-20", 1400),
        PopulationData("21-30", 1700),
        PopulationData("31-40", 1500),
        PopulationData("41-50", 1200),
      ],
      xValueMapper: (data, _) => data.ageGroup,
      yValueMapper: (data, _) => data.count,
      color: Colors.pinkAccent,
      dataLabelSettings: DataLabelSettings(isVisible: true),
      yAxisName: 'femaleAxis',
    ),
  ],
)

这种方式不需要处理负数，数据逻辑更清晰，完全匹配你想要的人口金字塔效果。

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