![](/img/trans.png)
[英]Format & localize date labels in charts_flutter time series chart
[英]Format time labels in charts_flutter time series chart
我在flutter应用程序中实现了时间序列图,该图表显示了一段时间内的能源数据:
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,
);
我现在想更改xAxis上标签的格式,以便它们以小时和分钟显示时间,而不是默认的本地日期时间格式。 Charts_flutter画廊中的示例建议实现DateTimeFactory
,但我不知道如何执行此操作。 任何建议,欢迎:)
为您的时间(域)轴添加一个DateTimeAxisSpec
。
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,
);
在此示例中,我将图表上的标签从美国默认值“ 6月25日”,“ 27”,“ 29”和“ 7月1日”更改为“ 25 Jun”,“ 27”,“ 29”和“ 7月1日”分别。
您还可以通过为每一个添加额外的TickFormatterSpecs
来更改年,日和小时等格式。
大值换行时使用transitionFormat
,否则使用format
。 在我的示例中,使用transitionFormat格式化第一个刻度(以便您可以看到月份),但没有格式化第27个或第29个,因为它们是同一个月。 由于月份已更改,transitionFormat再次用于7月1日。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.