FL Chart X轴无法滚动求助：多数据点下如何开启横向滚动

你的问题出在两个核心点：一是固定死了Chart容器的宽度，当数据量超过固定宽度能容纳的数量时，滚动范围不足；二是没在FL Chart内部配置X轴的自适应显示逻辑，导致标签被压缩或截断。

给你两个关键修改步骤：

1. 动态计算Chart容器宽度 #

把固定的width: 1000改成根据数据数量动态计算，确保每个X轴标签都有足够的显示空间。比如给每个数据项预留120px宽度，总宽度直接用数据长度乘以这个值：

Container(
  alignment: Alignment.center,
  width: double.infinity,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        color: Colors.green,
        // 动态计算宽度，每个数据项预留120px显示空间
        width: FakeData.barChartFakeData.length * 120,
        height: 250,
        child: CustomBarChartWidget(data: FakeData.barChartFakeData),
      ),
    ),
  ),
),

2. 配置FL Chart的X轴显示逻辑 #

在你的CustomBarChartWidget里，需要确保X轴标签不会被强制压缩，同时保留轴的基础显示：

BarChartData _buildBarChartData(List<BarChartGroupData> data) {
  return BarChartData(
    alignment: BarChartAlignment.spaceAround,
    maxY: 100, // 匹配Y轴0-100的范围要求
    barTouchData: BarTouchData(enabled: true),
    titlesData: FlTitlesData(
      bottomTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: true,
          reservedSize: 40, // 预留标签的显示高度，避免被截断
          getTitlesWidget: (value, meta) {
            // 返回对应的预算标题
            return Text(
              FakeData.barChartFakeData[value.toInt()].title,
              textAlign: TextAlign.center,
            );
          },
        ),
      ),
      leftTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: true,
          interval: 20, // Y轴刻度间隔设为20，匹配0-100的范围
          getTitlesWidget: (value, meta) => Text(value.toInt().toString()),
        ),
      ),
      topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
      rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
    ),
    borderData: FlBorderData(show: true),
    barGroups: data,
  );
}

修改完成后，当数据项超过4个时，SingleChildScrollView会根据动态计算的宽度提供足够的滚动空间，同时X轴标签能完整显示，不会被压缩，横向滚动功能就能正常生效。

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