格式化Charts_flutter时间序列图中的时间标签以包括hh：mm：ss [英] Format time labels in charts_flutter time series chart to include hh:mm:ss

问题描述

是否可以在Charts_flutter时间序列图的xAxis上设置标签格式以显示 hh：mm：ss 。 此答案解释了如何格式化代码以显示月份和日期，但是我需要显示的信息已经收集了一些一分钟。

Is it possible to format the labels on the xAxis of a charts_flutter time series chart to display hh:mm:ss. This answer explains how to go about formatting the code to display months and days but the information I need to display is collected a few times a minute.

图表。AutoDateTimeTickFormatterSpec不允许指定秒数。以上问题的操作数暗示了 DateTimeFactory ，在Charts_flutter画廊中提到过，但我也不确定如何使用它，或者它是否有任何用处在这种情况下。

charts.AutoDateTimeTickFormatterSpec doesn't allow for specifying seconds. The OP on the above question alluded to a DateTimeFactory which is mentioned in the charts_flutter gallery, but I'm also unsure how to use this, or if it is even of any use in this situation.

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上使用字符串，但是我特别需要一个折线图-如果折线图上有一些指定字符串而不是日期时间的方法，

Alternatively, is there a different chart I could use that would allow for this functionality? I see that charts.BarChart allows for Strings on the xAxis, but I specifically need a line chart - is there some way of specifying strings rather than datetimes on a line chart if the above formatting is not possible?

推荐答案

由于在 MinuteTimeStepper ，没有意义。标签之间可以达到的最小间隔似乎是5分钟。 MinuteTimeStepper 默认间隔为5、10、15、20和30分钟。

Because of a setting down in MinuteTimeStepper, there's no point. The smallest interval that you can achieve between labels appears to be 5 minutes. The MinuteTimeStepper defaults to intervals of 5, 10, 15, 20 and 30 minutes.

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

它有一个构造函数，可让您传递自己的列表，但我不知道

It has a constructor that allows you to pass in your own list, but I can't figure out how to get that to work.

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

Instead, I just modified it to become const [1, 5, 10... and that now draws labels with a 1 minute gap (if space is available).

鉴于标签将被绘制到最接近的位置（即使有此更改）是每分钟，没有秒数是没有意义的。

Given that the closest the labels will be drawn (even with this change) is every minute, there's no point in including seconds.

采取示例，然后将系列数据修改为

Taking the sample and modifying the series data to

  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 。请注意，半分钟的点是按预期方式绘制的，但未按预期标记。

gives labels that read 1 00, 01 and 02 (1PM exactly, 1 minute past and 2 minutes past) which are generated by the default format of mm and h mm. Note that the points at the half minute are drawn, but not labeled, as expected.

如果您希望使用24小时格式，可以添加 TimeFormatterSpec 像

If you wanted these in 24 hour format you could add a TimeFormatterSpec like

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

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