在 chart_flutter 时间序列图表中格式化和本地化日期标签答案

【问题标题】：Format & localize date labels in charts_flutter time series chart在 chart_flutter 时间序列图表中格式化和本地化日期标签
【发布时间】：2019-02-14 17:13:51
【问题描述】：

我在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,
        ),
      ],
    );
  }
}

我想使用 localize DateTime 格式在域轴上格式化开始和结束代码，例如DateFormat.yMMMd(Localizations.localeOf(context).languageCode).format(date)

我怎样才能做到这一点？

【问题讨论】：

标签： charts dart flutter

【解决方案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 时，我无法复制显示...

【讨论】：

【解决方案2】：

你可以试试这个：

tickFormatterSpec: 新图表。AutoDateTimeTickFormatterSpec( 月：新图表。TimeFormatterSpec（格式：'MMM'， transitionFormat: 'MMM yy', ), 年份：新图表。TimeFormatterSpec（格式：'YYYY'， transitionFormat: 'MMM yy', )),

【讨论】：