Изменить флаттер линейной диаграммы оси X - PullRequest
Новая
       78

Изменить флаттер линейной диаграммы оси X

1 голос
/ 04 марта 2020

Я хочу нарисовать график в трепетании. Я следую этому учебнику , он отлично работает, если дата и месяц отличаются.

Но почему, если в нем только одна дата и одна точка, график обращается к этому?

Код 

/// 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);
}

Выход

enter image description here

Что такое 12: 00 значит именно здесь? Я хочу, чтобы ось X отображала весь марш даты. Возможно ли это?

1 Ответ

1 голос
/ 04 марта 2020

Имея только одну точку, ось X не имеет шкалы, поэтому она увеличивает показ одной даты в максимально возможном разрешении - в данном случае до ближайшей минуты. Это полночь ("12:00") двенадцатого марта. Для принудительной установки фиксированной шкалы используйте 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,
      ),
    ),
  ),
);
...