Flutter中StackedColumnChart如何显示重复数据列？

问题原因 #

你使用的StackedColumnSeries会自动将相同X轴值的数据堆叠到同一个柱子中，两条2023/01/01的数据被合并成了一根高度为200的柱子，最终只显示两列而非三列。同时CategoryAxis默认会合并相同的分类标签，进一步隐藏了重复日期对应的独立柱子。

解决方案 #

根据你要展示每条数据独立柱子、X轴保留考试日期的需求，提供两种可行方案：

方案1：改用普通柱状图系列（ColumnSeries） #

替换堆叠系列为普通柱状图系列，并设置CategoryAxis的arrangeByIndex: true，确保每个数据条目按原始顺序显示，保留重复日期标签：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

import 'bar-chart-data.dart';

void main() {
  runApp(
    MaterialApp(
      home: BarChartModel(
        chartData: [
          BarChartData(examDate: '2023/01/01', score: 100),
          BarChartData(examDate: '2023/01/01', score: 100),
          BarChartData(examDate: '2023/01/03', score: 80),
        ],
      ),
    ),
  );
}

class BarChartModel extends StatefulWidget {
  const BarChartModel({Key? key, required this.chartData}) : super(key: key);
  final List<BarChartData> chartData;

  @override
  State<BarChartModel> createState() => _BarChartModelState();
}

class _BarChartModelState extends State<BarChartModel> {
  late List<BarChartData> barChartData = [];

  @override
  void initState() {
    barChartData.addAll(widget.chartData);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xfff5f5f5),
      body: Padding(
        padding: const EdgeInsets.only(top: 10, bottom: 5),
        child: Center(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(
              arrangeByIndex: true, // 按数据索引排列，保留重复日期标签
              labelRotation: 45, // 可选：旋转标签避免重叠
            ),
            series: <ChartSeries>[
              ColumnSeries<BarChartData, String>(
                dataSource: barChartData,
                xValueMapper: (BarChartData ch, _) => ch.examDate,
                yValueMapper: (BarChartData ch, _) => ch.score,
                width: 0.6, // 可选：调整柱子宽度，避免同日期柱子重叠
              ),
            ],
          ),
        ),
      ),
    );
  }
}

方案2：保留堆叠效果（需调整数据结构） #

如果确实需要堆叠效果，需将同日期的不同数据拆分为独立系列，而非同一系列内的重复X值：

// 示例：拆分同日期数据为不同系列
series: <ChartSeries>[
  ColumnSeries<BarChartData, String>(
    dataSource: [barChartData[0], barChartData[2]],
    xValueMapper: (ch, _) => ch.examDate,
    yValueMapper: (ch, _) => ch.score,
    name: '考试1',
  ),
  ColumnSeries<BarChartData, String>(
    dataSource: [barChartData[1], null], // 对应日期补null占位
    xValueMapper: (ch, _) => ch?.examDate,
    yValueMapper: (ch, _) => ch?.score,
    name: '考试2',
  ),
]

关键说明 #

• arrangeByIndex: true：强制X轴按数据原始顺序排列，不合并相同分类标签，确保重复日期全部显示。
• ColumnSeries：与堆叠系列不同，普通柱状图会为每个数据条目生成独立柱子，相同X值的柱子会并列展示。

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