时间戳

首页 > 解决方案 > 在 charts_flutter 时间序列图表中格式化时间标签以包含 hh:mm:ss

charts - 在 charts_flutter 时间序列图表中格式化时间标签以包含 hh:mm:ss

问题描述

是否可以在 chart_flutter 时间序列图表的 xAxis 上格式化标签以显示hh:mm:ss。这个答案解释了如何格式化代码以显示月份和日期，但我需要显示的信息每分钟收集几次。

charts.AutoDateTimeTickFormatterSpec不允许指定秒数。上述问题的 OPDateTimeFactory提到了 chart_flutter 库中提到的 a，但我也不确定如何使用它，或者在这种情况下它是否有用。

new charts.TimeSeriesChart(
  getSeries(item),
  animate: false,
  primaryMeasureAxis: new charts.NumericAxisSpec(
    tickProviderSpec: new charts.BasicNumericTickProviderSpec(zeroBound: false)
  ),
  domainAxis: new charts.DateTimeAxisSpec(
    tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
      hour: new charts.TimeFormatterSpec(format: 'hh', transitionFormat: 'dd/MM hh:mm'),
    )
  ),
),

或者，我可以使用不同的图表来实现此功能吗？我看到charts.BarChart允许在 xAxis 上使用字符串，但我特别需要一个折线图 - 如果上述格式不可行，是否有某种方法可以在折线图上指定字符串而不是日期时间？

标签： chartsdartflutter

解决方案

由于在 中设置MinuteTimeStepper，没有意义。您可以在标签之间实现的最小间隔似乎是 5 分钟。默认间隔为MinuteTimeStepper5、10、15、20 和 30 分钟。

class MinuteTimeStepper extends BaseTimeStepper {
  static const _defaultIncrements = const [5, 10, 15, 20, 30];

它有一个构造函数，允许你传入你自己的列表，但我不知道如何让它工作。

相反，我只是将其修改为const [1, 5, 10...，现在以 1 分钟的间隔绘制标签（如果有可用空间）。

鉴于最接近的标签将被绘制（即使有这种变化）是每分钟，所以包括秒是没有意义的。

抽取样本并将系列数据修改为

  new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 00, 00), 15),
  new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 00, 30), 5),
  new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 01, 00), 25),
  new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 01, 30), 20),
  new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 02, 00), 10),

给出的标签为1 00,01和02（正好是下午 1 点，过去 1 分钟和过去 2 分钟），它们是由 和 的默认格式生成mm的h mm。请注意，半分钟的点已按预期绘制，但未标记。

如果你想要这些 24 小时格式，你可以添加一个TimeFormatterSpec喜欢

        minute: new charts.TimeFormatterSpec(
          format: 'mm', // or even HH:mm here too
          transitionFormat: 'HH:mm',
        ),

推荐阅读