如何在Flutter Charts中设置x、y轴最值及10秒间隔？

核心配置方案 #

• 设置X轴10秒间隔：使用DateTimeAxis（时间型X轴），指定interval为10，intervalType为DateTimeIntervalType.seconds；若X轴为数值型（如直接用秒数），则用NumericAxis并设置interval:10。
• 设置轴最小/最大值：通过轴的minimum和maximum属性直接指定范围，X轴用DateTime对象（时间型）或数值（数值型），Y轴用对应数值范围。

完整代码示例 #

// 假设你的数据模型如下
class SensorData {
  final int timestamp; // 毫秒级时间戳
  final double timer1;
  final double fp7;

  SensorData(this.timestamp, this.timer1, this.fp7);
}

// 图表配置部分
SfCartesianChart(
  primaryXAxis: DateTimeAxis(
    interval: 10,
    intervalType: DateTimeIntervalType.seconds,
    // 动态绑定数据的时间范围，或固定值
    minimum: DateTime.fromMillisecondsSinceEpoch(timerData.first.timestamp),
    maximum: DateTime.fromMillisecondsSinceEpoch(timerData.last.timestamp),
    title: const AxisTitle(text: '时间（秒）'),
  ),
  primaryYAxis: NumericAxis(
    // 根据FP7数据实际范围调整最小最大值
    minimum: 0,
    maximum: 100,
    interval: 20,
    title: const AxisTitle(text: 'FP7数值'),
  ),
  series: <ChartSeries>[
    LineSeries<SensorData, DateTime>(
      dataSource: timerData,
      xValueMapper: (SensorData data, _) => DateTime.fromMillisecondsSinceEpoch(data.timestamp),
      yValueMapper: (SensorData data, _) => data.timer1,
      name: 'Timer1',
    ),
    LineSeries<SensorData, DateTime>(
      dataSource: fp7Data,
      xValueMapper: (SensorData data, _) => DateTime.fromMillisecondsSinceEpoch(data.timestamp),
      yValueMapper: (SensorData data, _) => data.fp7,
      name: 'FP7',
    ),
  ],
)

补充说明 #

• 若需实时更新轴范围，可在数据更新后重新计算minimum和maximum（比如取最新N条数据的时间/数值范围）。
• 若要实现自动滚动显示最新10秒数据，可在DateTimeAxis中添加autoScrollingMode: AutoScrollingMode.end和autoScrollingDelta: 10（单位为秒）。

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