Как я могу отображать только часы и минуты в моей флаттерной диаграмме?

Question

Я создаю флаттер, который показывает температуру во времени. В настоящее время ось X показывает месяц и день, которые мне не нужны. Я хотел бы показать часы и минуты в формате ЧЧ: ММ. Вот как выглядит мой график:

Вот код виджета моего графика:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:charts_flutter/flutter.dart';

final db = Firestore.instance;

class TemperatureData {
  // Requires Firestore epoch time to be converted to DateTime with  DateTime.fromMillisecondsSinceEpoch(time * 1000)
  final int temperature;
  final DateTime time;

  TemperatureData(this.temperature, this.time);
}

List<Series> _createChartData(List<TemperatureData> temperatureData) {
  var data = [
    new Series<TemperatureData, DateTime>(
      id: 'Temperature',
      domainFn: (TemperatureData temperatureData, _) => temperatureData.time,
      measureFn: (TemperatureData temperatureData, _) =>
          temperatureData.temperature,
      data: temperatureData,
    ),
  ];

  return data;
}

List<TemperatureData> _parseTemperatureData(rawTemperatureData) {
  List<TemperatureData> parsedList = [];

  for (var i = 0; i < rawTemperatureData['Temperature'].length; i++) {
    parsedList.add(TemperatureData(
        rawTemperatureData['Temperature'][i]['Temperature'],
        rawTemperatureData['Temperature'][i]['Time'].toDate()));
  }
  return parsedList;
}

class TemperatureChart extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TemperatureChartState();
  }
}

class _TemperatureChartState extends State<TemperatureChart> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: Firestore.instance
            .collection('SensorData')
            .document('MapTest')
            .snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Container(
              height: 300,
              child: TimeSeriesChart(
                _createChartData(_parseTemperatureData(snapshot.data)),
                animate: true,
              ),
            );
          } else {
            return CircularProgressIndicator();
          }
        });
  }
}

А вот данные, которые я извлекаю из Firestore :

Answer 1

Вы должны включить

intl: ^0.15.8

в свой pubspec.yaml, если хотите, вы можете получить его из https://pub.dev/packages/intl последней версии, тогда:

List<TemperatureData> _parseTemperatureData(rawTemperatureData) {
  List<TemperatureData> parsedList = [];

  for (var i = 0; i < rawTemperatureData['Temperature'].length; i++) {
    parsedList.add(TemperatureData(
        rawTemperatureData['Temperature'][i]['Temperature'],
        DateTime.Hm().format(rawTemperatureData['Temperature'][i]['Time'])));
  }
  return parsedList;
}

Answer 2

Вы можете отформатировать дату и время

 List<TemperatureData> _parseTemperatureData(rawTemperatureData) {
  List<TemperatureData> parsedList = [];

  for (var i = 0; i < rawTemperatureData['Temperature'].length; i++) {
    parsedList.add(TemperatureData(
        rawTemperatureData['Temperature'][i]['Temperature'],
        DateTime.Hm().format(rawTemperatureData['Temperature'][i]['Time']).toDate()));
  }
  return parsedList;
}