在图表中格式化时间标签_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画廊中的示例建议实施 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,
);

在此示例中，我将图表上的标签从美国默认值 6月25日更改为 27， 29和 7月1日到 25 Jun， 27， 29和 7月1日。

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.

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