Flutter SfCartesianChart运行数分钟后出现数据覆盖重绘异常问题

云原生阿岚

2026-10-7

问题根因

你遇到的折线回连现象核心是数据源中出现了x值小于之前所有数据点x值的新数据，折线会按照x值的顺序连接点，所以会从最大x值的旧点直接连到最小x值的新点，形成从右往左的回连线。

排查与解决方案

1. 修正X轴配置错误

你当前设置的autoScrollingMode: AutoScrollingMode.start不符合实时数据从左到右滚动的需求，修改为如下配置：

primaryXAxis: NumericAxis(
    isVisible: false,
    interval: 20,
    autoScrollingMode: AutoScrollingMode.end, // 自动滚动到最新数据端
    autoScrollingDelta: 120, // 按需设置，比如保留最近120个数据点的显示范围
),

2. 检查x值生成逻辑

90%以上的同类问题都是x值异常重置导致：

不要用chartData的数组下标作为x值，单独维护一个全局自增的int类型计数变量，每次新增数据点时计数+1赋值给x，不要出现计数归零、溢出重置的逻辑
不要使用short等短整型存储x计数，避免数值溢出后自动归零

3. 优化数据源更新逻辑

如果不需要全量保留历史数据，新增数据时主动清理超出保留长度的旧数据，同时调用官方提供的增量更新方法避免全量重绘异常：

// 新蓝牙数据到来时的处理示例
int _xCounter = 0;
final List<_ChartData> chartData = [];

void addNewData(int newBpmValue) {
  chartData.add(_ChartData(x: _xCounter++, y1: newBpmValue));
  // 保留最近200条数据，可按需调整
  if (chartData.length > 200) {
    chartData.removeAt(0);
  }
  // 增量更新图表，性能更稳定
  seriesController?.updateDataSource(
    addedDataIndexes: [chartData.length - 1],
    removedDataIndexes: chartData.length >= 200 ? [0] : null,
  );
}