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格式来格式化域Axis上的开始和结束代码。 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时，我无法复制显示...