在圖表中格式化時間標簽_flutter時間序列圖

Question

我在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 ，但我不知道如何執行此操作。 任何建議，歡迎:)

Answer 1

為您的時間（域）軸添加一個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日。