当前位置:  开发笔记 > 编程语言 > 正文

在图表中格式化时间标签_flutter时间序列图

如何解决《在图表中格式化时间标签_flutter时间序列图》经验,为你挑选了1个好方法。

我在flutter应用程序中实现了时间序列图,该图表显示了一段时间内的能源数据:

final List> seriesList = [
     new charts.Series(
        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(
      seriesList,
      animate: animate,
);

我现在想更改xAxis上标签的格式,以便它们以小时和分钟显示时间,而不是默认的本地日期时间格式。Charts_flutter画廊中的示例建议实现DateTimeFactory,但我不知道如何执行此操作。任何建议,欢迎:)



1> Richard Heap..:

DateTimeAxisSpec为您的时间(域)轴添加一个。

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

在此示例中,我将图表上的标签从美国默认值“ 6月25日”,“ 27”,“ 29”和“ 7月1日”更改为“ 25 Jun”,“ 27”,“ 29”和“ 7月1日”分别。

您还可以通过TickFormatterSpecs为每个年份添加其他内容来更改年,日和小时等格式。

transitionFormat当大值包裹,否则使用format时使用。在我的示例中,使用transitionFormat格式化第一个刻度(以便您可以看到月份),但没有格式化第27个或第29个,因为它们是同一个月。由于月份已更改,transitionFormat再次用于7月1日。

推荐阅读
coco2冰冰
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有