Format time labels in charts_flutter time series c

2019-08-22 12:09发布

问题:

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.

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

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?

回答1:

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.

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

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.

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