如何在 Flutter Chart 中只显示小时和分钟？

Question

我正在创建一个显示温度随时间变化的颤振图表。目前，X 轴显示月份和日期，这是我不想要的。我希望它以 HH:MM 格式显示小时和分钟。这是我的图表现在的样子：

这是我的图表小部件代码：

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

将此添加到您的 domainAxis：

tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
        hour: new charts.TimeFormatterSpec(
          format: 'H:mm',
          transitionFormat: 'H:mm',
        ),
      ),

Answer 3

你可以格式化日期时间

 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;
}