Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.0k views
in Technique[技术] by (71.8m points)

dart - Format time labels in charts_flutter time series chart

I have implemented a time series chart in my flutter app which displays energy data over time:

final List<charts.Series<TimeSeriesEnergy, DateTime>> seriesList = [
     new charts.Series<TimeSeriesEnergy, DateTime>(
        id: 'Energy',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (TimeSeriesEnergy p, _) => p.time,
        measureFn: (TimeSeriesEnergy p, _) => p.energy,
        data: data,
     )
];

final bool animate = true;

var chart = new charts.TimeSeriesChart<TimeSeriesEnergy>(
      seriesList,
      animate: animate,
);

I would like now to change the format of the labels on the xAxis, so that they display the time in hours and minutes, rather then the default local date time format. The example in the charts_flutter gallery suggest implementing a DateTimeFactory, but I have no idea on how to do this. Any suggestions are welcome :)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Add a DateTimeAxisSpec for your time (domain) axis.

var chart = new charts.TimeSeriesChart<TimeSeriesEnergy>(
  seriesList,
  domainAxis: new charts.DateTimeAxisSpec(
    tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
      day: new charts.TimeFormatterSpec(
        format: 'dd',
        transitionFormat: 'dd MMM',
      ),
    ),
  ),
  animate: animate,
);

In this example I changed the labels on my chart from the US default of "Jun 25", "27", "29" and "Jul 1" to "25 Jun", "27", "29" and "01 Jul" respectively.

You can change year, day and hour etc formatting too by adding additional TickFormatterSpecs for each of those.

The transitionFormat is used when the big value wraps, otherwise format is used. From my example, transitionFormat was used to format the first tick (so that you can see the month), but not the 27th or 29th as they are the same month. transitionFormat is again used for Jul 1st as the month has changed.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...