更改 X 轴折线图抖动

Question

我想在颤振中绘制折线图。我遵循本教程，如果日期和月份不同，它可以正常工作。

但是为什么如果它只有一个日期和一个点，图表会变成这个？

代码

/// Timeseries chart example
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
        title: 'My app', // used by the OS task switcher
        theme: ThemeData(
          accentIconTheme: const IconThemeData.fallback().copyWith(
            color: Colors.white,
          ),
          primaryTextTheme: TextTheme(title: TextStyle(color: Colors.white)),
          primarySwatch: Colors.orange,
          primaryIconTheme: const IconThemeData.fallback().copyWith(
            color: Colors.white,
          ),
        ),
        home: SimpleTimeSeriesChart()),
  );
}

class SimpleTimeSeriesChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var seriesList = List<Data>();

    seriesList.add(Data(DateTime(2020, 03, 12), int.parse("50")));

    return Scaffold(
        appBar: AppBar(
          title: Text("Graph"),
        ),
        body: Container(
            height: 500,
            width: double.infinity,
            child: charts.TimeSeriesChart(_createSampleData(seriesList),
                animate: false,
                behaviors: [
                  new charts.SlidingViewport(),
                  new charts.PanAndZoomBehavior(),
                ],
                dateTimeFactory: const charts.LocalDateTimeFactory(),
                defaultRenderer:
                    new charts.LineRendererConfig(includePoints: true))));
  }

  List<charts.Series<Data, DateTime>> _createSampleData(List<Data> data) {
    return [
      charts.Series<Data, DateTime>(
        id: 'time',
        domainFn: (Data sales, _) => sales.time,
        measureFn: (Data sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}

/// Sample linear data type.
class Data {
  final DateTime time;
  final int sales;

  Data(this.time, this.sales);
}

输出

12:00 在这里是什么意思？我希望 x 轴显示日期的所有行军。是否可以？

Answer 1

只有一个点，X 轴没有刻度，因此它会以尽可能大的分辨率放大显示单个日期 - 在这种情况下，精确到最接近的分钟。那是三月十二日的午夜（“12AM”）。要强制固定比例，请使用StaticDateTimeTickProviderSpec. 例如：

return Scaffold(
  appBar: AppBar(
    title: Text('Graph'),
  ),
  body: Container(
    height: 500,
    width: double.infinity,
    child: charts.TimeSeriesChart(
      _createSampleData(seriesList),
      domainAxis: charts.DateTimeAxisSpec(
        tickProviderSpec: charts.StaticDateTimeTickProviderSpec(
        <charts.TickSpec<DateTime>>[
          charts.TickSpec<DateTime>(DateTime(2020, 3, 1)),
          charts.TickSpec<DateTime>(DateTime(2020, 3, 6)),
          charts.TickSpec<DateTime>(DateTime(2020, 3, 11)),
          charts.TickSpec<DateTime>(DateTime(2020, 3, 16)),
          charts.TickSpec<DateTime>(DateTime(2020, 3, 21)),
          charts.TickSpec<DateTime>(DateTime(2020, 3, 26)),
          charts.TickSpec<DateTime>(DateTime(2020, 4, 1)),
        ],
      ),
        tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
          day: charts.TimeFormatterSpec(
            format: 'dd MMM',
            transitionFormat: 'dd MMM',
          ),
        ),
      ),
      animate: false,
      behaviors: [
        charts.SlidingViewport(),
        charts.PanAndZoomBehavior(),
      ],
      dateTimeFactory: const charts.LocalDateTimeFactory(),
      defaultRenderer: charts.LineRendererConfig(
        includePoints: true,
      ),
    ),
  ),
);