使用fl_charts绘制折线图报错：Infinity或NaN转int失败

1. 排查折线图数据源 #

• 检查LineChartBarData的spots列表，确保所有FlSpot的x、y值都不是NaN或Infinity。比如：

  // 错误示例：包含无效值
  final spots = [FlSpot(0, double.nan), FlSpot(1, double.infinity)];
  // 正确示例：使用有效数值
  final spots = [FlSpot(0, 10), FlSpot(1, 20), FlSpot(2, 15)];
  

• 若数据来自接口或本地存储，必须做有效性校验，过滤无效值：

  final validSpots = rawDataList
      .where((data) => 
          data.x != null && data.y != null 
          && !data.x!.isNaN && !data.y!.isNaN 
          && data.x!.isFinite && data.y!.isFinite)
      .map((data) => FlSpot(data.x!, data.y!))
      .toList();
  

2. 检查坐标轴范围配置 #

• 手动设置minX/maxX/minY/maxY时，确保值为有效有限数，且范围合理（max > min），避免出现minY: double.infinity这类配置。
• 使用自动计算范围时，确保数据源至少有1个有效数据点，否则自动计算会生成无效值：

  // 无有效数据时显示占位，避免图表崩溃
  if (validSpots.isEmpty) {
    return const Center(child: Text('无可用数据'));
  }
  return LineChart(LineChartData(
    lineBarsData: [LineChartBarData(spots: validSpots)],
  ));
  

3. 检查自定义组件的数值处理 #

• 自定义坐标轴标签、tooltip等回调函数时，避免处理数值时产生NaN或Infinity。比如：

  // 错误示例：除以0导致Infinity
  bottomTitles: AxisTitles(
    sideTitles: SideTitles(
      getTitlesWidget: (value, meta) {
        return Text((100 / value).toString()); // value为0时出错
      },
    ),
  ),
  // 正确示例：增加边界判断
  bottomTitles: AxisTitles(
    sideTitles: SideTitles(
      getTitlesWidget: (value, meta) {
        if (value == 0) return const Text('0');
        return Text((100 / value).toStringAsFixed(1));
      },
    ),
  ),
  

4. 排查数据计算逻辑 #

• 处理数据时（如求最大值、平均值），避免对空集合做聚合操作，或出现除以0的情况：

  // 错误示例：空列表求max返回-Infinity
  final maxY = validSpots.map((s) => s.y).reduce(max);
  // 正确示例：先判断非空
  final maxY = validSpots.isNotEmpty ? validSpots.map((s) => s.y).reduce(max) : 0;
  

快速验证方法 #

先用fl_charts官方示例的硬编码有效数据替换你的数据源，若图表能正常渲染，说明问题出在你的数据处理逻辑上；若仍报错，检查是否为版本兼容问题，尝试升级或降级到稳定版fl_charts。

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