Отформатируйте метки времени в диаграмме временных рядов charts_flutter

Question

Я реализовал диаграмму временных рядов в своем приложении, отображающем данные об энергии с течением времени:

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, но я понятия не имею, как это сделать. Любые предложения приветствуются:)

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,
);

В этом примере я изменил метки на моем графике со значения по умолчанию для США "25 июня", "27", "29" и "1 июля" на "25 июня", "27", "29" и " 01 июля "соответственно.

Вы также можете изменить форматирование года, дня и часа и т. Д., Добавив дополнительные TickFormatterSpecs для каждого из них.

transitionFormat используется при переносе большого значения, в противном случае используется format. В моем примере для форматирования первого тика (чтобы вы могли видеть месяц) использовался transitionFormat, а не 27-й или 29-й, поскольку они совпадают с месяцем. transitionFormat снова используется 1 июля, так как месяц изменился.