在 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', ) ),