在 charts_flutter 时间序列图表中格式化时间标签 [英] Format time labels in charts_flutter time series chart

问题描述

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

I have implemented a time series chart in my flutter app which displays energy data over time:

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 上标签的格式，以便它们以小时和分钟显示时间，而不是默认的本地日期时间格式.charts_flutter 库中的 example 建议实施 DateTimeFactory，但我不知道如何做到这一点.欢迎任何建议:)

I would like now to change the format of the labels on the xAxis, so that they display the time in hours and minutes, rather then the default local date time format. The example in the charts_flutter gallery suggest implementing a DateTimeFactory, but I have no idea on how to do this. Any suggestions are welcome :)

推荐答案

为您的时间(域)轴添加 DateTimeAxisSpec.

Add a DateTimeAxisSpec for your time (domain) axis.

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"分别.

In this example I changed the labels on my chart from the US default of "Jun 25", "27", "29" and "Jul 1" to "25 Jun", "27", "29" and "01 Jul" respectively.

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

You can change year, day and hour etc formatting too by adding additional TickFormatterSpecs for each of those.

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

The transitionFormat is used when the big value wraps, otherwise format is used. From my example, transitionFormat was used to format the first tick (so that you can see the month), but not the 27th or 29th as they are the same month. transitionFormat is again used for Jul 1st as the month has changed.

这篇关于在 charts_flutter 时间序列图表中格式化时间标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！