在 charts_flutter 時間序列圖表中格式化和本地化日期標簽

Question

我在charts_flutter 中有以下時間序列：

charts.Series<DatumPoint, DateTime>(
        id: 'Series',
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        domainFn: (DatumPoint point, _) => point.date,
        measureFn: (DatumPoint point, _) => point.value,
        data: p,
      )

這就是我的TimeSeriesChart創建方式：

@override
  Widget build(BuildContext context) {
    return charts.TimeSeriesChart(
      widget.seriesList,
      animate: widget.animate,
      selectionModels: [
        charts.SelectionModelConfig(
          type: charts.SelectionModelType.info,
          changedListener: _onSelectionChanged,
        )
      ],
      domainAxis: charts.EndPointsTimeAxisSpec(),
      behaviors: [
        charts.LinePointHighlighter(
            showHorizontalFollowLine:
                charts.LinePointHighlighterFollowLineType.none,
            showVerticalFollowLine:
                charts.LinePointHighlighterFollowLineType.nearest,
            dashPattern: [1, 1]),
        charts.SelectNearest(
          eventTrigger: charts.SelectionTrigger.tapAndDrag,
        ),
      ],
    );
  }
}

我想使用本地化DateTime格式，例如DateFormat.yMMMd(Localizations.localeOf(context).languageCode).format(date)格式化域DateFormat.yMMMd(Localizations.localeOf(context).languageCode).format(date)開始和結束代碼

我怎樣才能做到這一點？

Answer 1

Shruti Gupta 的解決方案並不完整。 您必須使用自定義dateTimeFactory來真正本地化日期。

所以創建你自己的DateTimeFactory

import 'package:charts_common/common.dart' as common show DateTimeFactory;

/// A class to localize the date
class LocalizedTimeFactory implements common.DateTimeFactory {
  final Locale locale;

  const LocalizedTimeFactory(this.locale);

  DateTime createDateTimeFromMilliSecondsSinceEpoch(
      int millisecondsSinceEpoch) {
    return DateTime.fromMillisecondsSinceEpoch(millisecondsSinceEpoch);
  }

  DateTime createDateTime(int year,
      [int month = 1,
        int day = 1,
        int hour = 0,
        int minute = 0,
        int second = 0,
        int millisecond = 0,
        int microsecond = 0]) {
    return DateTime(
        year, month, day, hour, minute, second, millisecond, microsecond);
  }

  /// Returns a [DateFormat].
  DateFormat createDateFormat(String pattern) {
    return DateFormat(pattern, locale.languageCode);
  }
}

然后您需要添加一個tickFormatterSpec以便您的自定義 dateTimeFactory 被考慮在內並填充dateTimeFactory字段：

charts.TimeSeriesChart(data.seriesPressure(context),
     defaultRenderer: charts.LineRendererConfig(includeArea: true, strokeWidthPx: 1),
     animate: false,
     domainAxis: new charts.DateTimeAxisSpec(
        tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
            hour: new charts.TimeFormatterSpec(format: "Hm", transitionFormat: "Hm"),
        ),
     ),
     dateTimeFactory: LocalizedTimeFactory(Localizations.localeOf(context)),
     primaryMeasureAxis: charts.NumericAxisSpec(
         tickProviderSpec: charts.BasicNumericTickProviderSpec(zeroBound: false))
     ),

您剩下的任務是更好地配置tickFormatterSpec 。 使用日期、小時和分鍾字段，以及格式和轉換格式，直到達到您想要的效果。 不幸的是，當沒有 tickFormatterSpec 時，我無法復制顯示...

Answer 2

你可以試試這個：

tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec( 月: new charts.TimeFormatterSpec( format: 'MMM', transitionFormat: 'MMM yy', ), year: new charts.TimeFormatterSpec( format: 'YYYY', transitionFormat: 'MMM yy', ) ),