改变X-axis折线图颤动

Question

我想在flutter中画折线图。我遵循这个 tutorial，如果日期和月份不同，它工作正常。

但是为什么只有一个日期和一个点，图形会变成这样呢？

代码

/// 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-axis 显示所有行进日期。可能吗？

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,
      ),
    ),
  ),
);

改变X-axis折线图颤动

Change X-axis Line Chart flutter

charts

line

dart

flutter