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)

我该如何实现？

Answer 1

Shruti Gupta的解决方案尚未完成。您必须使用自定义"user.name": 'tim'来真正本地化日期。

因此，创建您自己的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); } }，以便考虑您的自定义dateTimeFactory并填写tickFormatterSpec字段：

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 ...时，我无法复制显示内容。

Answer 2

您可以尝试以下方法：

tickFormatterSpec：新图表.AutoDateTimeTickFormatterSpec（月：新图表。TimeFormatterSpec（格式：“ MMM”， transitionFormat：“ MMM yy”，），年：新图表.TimeFormatterSpec（格式：“ YYYY”， transitionFormat：“ MMM yy”，））

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

2 个答案: