如何在FlChart底部标题中显示从PHP接口获取的日期

问题根源 #

你当前的_bottomTitles方法逻辑错误：每次都会遍历所有日期生成Text组件列表，然后直接调用toString()，导致底部显示的是整个列表的字符串（比如[Text("Sun"), Text("Mon"), ...]），而非对应数据点的单个日期。

修正方案 #

修改getTitlesWidget的逻辑，利用参数value（对应折线图点的x轴索引值），直接获取对应位置的日期：

SideTitles _bottomTitles() {
  return SideTitles(
    showTitles: true,
    // 强制每个数据点对应一个刻度，避免自动生成多余标题
    interval: 1,
    getTitlesWidget: (value, meta) {
      final index = value.toInt();
      // 校验索引合法性，防止越界
      if (index >= 0 && index < AvgDataBases.length) {
        final date = AvgDataBases[index].date ?? '';
        return SideTitleWidget(
          axisSide: meta.axisSide,
          child: Text(date),
        );
      }
      // 超出数据范围返回空容器，避免显示无效内容
      return const SizedBox();
    },
  );
}

额外优化说明 #

1. 添加interval: 1：确保每个数据点的x轴位置都对应一个日期标题，避免FlChart自动生成多余刻度。
2. 空值判断：处理date为null的情况，防止显示异常。
3. 索引校验：避免因索引越界导致的报错。

完整修正后的折线图代码 #

class AvgDataBaseList extends StatelessWidget {
  const AvgDataBaseList({super.key, required this.AvgDataBases});
  final List<AvgDataBaseData> AvgDataBases;

  @override
  Widget build(BuildContext context) {
    List<FlSpot> spots = AvgDataBases.asMap().entries.map((e) {
      return FlSpot(e.key.toDouble(), e.value.avg!.toDouble());
    }).toList();

    SideTitles _bottomTitles() {
      return SideTitles(
        showTitles: true,
        interval: 1,
        getTitlesWidget: (value, meta) {
          final index = value.toInt();
          if (index >= 0 && index < AvgDataBases.length) {
            final date = AvgDataBases[index].date ?? '';
            return SideTitleWidget(
              axisSide: meta.axisSide,
              child: Text(date),
            );
          }
          return const SizedBox();
        },
      );
    }

    return Container(
        margin: const EdgeInsets.symmetric(horizontal: 50),
        child: LineChart(LineChartData(
          borderData: borderData,
          titlesData: FlTitlesData(
            show: true,
            bottomTitles: AxisTitles(
              sideTitles: _bottomTitles(),
            ),
            leftTitles: AxisTitles(
              sideTitles: SideTitles(showTitles: false),
            ),
            topTitles: AxisTitles(
              sideTitles: SideTitles(showTitles: false),
            ),
            rightTitles: AxisTitles(
              sideTitles: SideTitles(showTitles: false),
            ),
          ),
          lineBarsData: [
            LineChartBarData(
                barWidth: 5,
                spots: spots,
                isCurved: true,
                gradient: LinearGradient(colors: gradientColors),
                belowBarData: BarAreaData(
                    show: true,
                    gradient: LinearGradient(
                      colors: gradientColors
                          .map((color) => color.withOpacity(0.3))
                          .toList(),
                    )))
          ],
          gridData: gridData,
        )));
  }
}

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