charts - 在charts_flutter时间序列图中格式化时间标签

Question

我在我的 flutter 应用程序中实现了一个时间序列图表，它显示随时间变化的能量数据:

final List<charts.Series<TimeSeriesEnergy, DateTime>> seriesList = [
     new charts.Series<TimeSeriesEnergy, DateTime>(
        id: 'Energy',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (TimeSeriesEnergy p, _) => p.time,
        measureFn: (TimeSeriesEnergy p, _) => p.energy,
        data: data,
     )
];

final bool animate = true;

var chart = new charts.TimeSeriesChart<TimeSeriesEnergy>(
      seriesList,
      animate: animate,
);

我现在想更改 xAxis 上标签的格式，以便它们以小时和分钟显示时间，而不是默认的本地日期时间格式。 example在 charts_flutter gallery 中建议实现 DateTimeFactory，但我不知道如何执行此操作。欢迎任何建议:)

Answer 1

为您的时间(域)轴添加一个 DateTimeAxisSpec。

var chart = new charts.TimeSeriesChart<TimeSeriesEnergy>(
  seriesList,
  domainAxis: new charts.DateTimeAxisSpec(
    tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
      day: new charts.TimeFormatterSpec(
        format: 'dd',
        transitionFormat: 'dd MMM',
      ),
    ),
  ),
  animate: animate,
);

在此示例中，我将图表上的标签从美国默认的“Jun 25”、“27”、“29”和“Jul 1”更改为“25 Jun”、“27”、“29”和“01 Jul”分别。

您也可以通过为每个格式添加额外的 TickFormatterSpecs 来更改年、日和小时等格式。

大值换行时使用transitionFormat，否则使用format。在我的示例中，transitionFormat 用于格式化第一个刻度(以便您可以看到月份)，但不是 27 日或 29 日，因为它们是同一个月。随着月份的变化，transitionFormat 再次用于 7 月 1 日。