更改X轴折线图抖动 [英] Change X-axis Line Chart flutter

问题描述

我想画一个折线图。我遵循此

12:00到底是什么意思？
我希望x轴显示日期的所有行进。

解决方案

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

 返回支架（
 appBar：AppBar（
标题：Text（'Graph'） ，
），
正文：容器（
高度：500，
宽度：double.infinity，
子对象：chart.TimeSeriesChart（
 _createSampleData（seriesList） ），
 domainAxis：charts.DateTimeAxisSpec（
 tickProviderSpec：charts.StaticDateTimeTickProviderSpec（
< charts.TickSpec< DateTime>>> [
 chart.TickSpec< DateTime>（DateTime（ 2020，3，1）），
图表.TickSpec< DateTime>（DateTime（2020，3，6）），
图表.TickSpec< DateTime>（DateTime（2020，3，11））， 
图表。TickSpec< DateTime>（DateTime（2020，3，16）），
图表。TickSpec< DateTime>（DateTime（2020，3，21）），
图表。 DateTime>（DateTime（2020，3，26）），
图表.TickSpec< DateTime>（DateTime（2020，4，1）），
]，
），
 tickForma tterSpec：Charts.AutoDateTimeTickFormatterSpec（
天：chart.TimeFormatterSpec（
格式：'dd MMM'，
 transitionFormat：'dd MMM'，
），
）， 
），
动画：false，
行为：[
 chart.SlidingViewport（），
 chart.PanAndZoomBehavior（），
]，
 dateTimeFactory：const chart.LocalDateTimeFactory（），
 defaultRenderer：Charts.LineRendererConfig（
 includePoints：true，
），
），
），
 ）; 
  

I want to draw a line chart in flutter. I follow this tutorial, it works fine if the date and month is different.

But why if it only has one date and one point, the graph turn to this?

Code

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

Output

What is 12:00 mean exactly here? I want the x-axis display all the march of date. Is it possible?

解决方案

With just one point the X axis has no scale, so it zooms in showing the single date in as much resolution as it can - in this case down to the nearest minute. That's midnight ("12AM") on the twelfth of March. To force a fixed scale use a StaticDateTimeTickProviderSpec. For example:

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轴折线图抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！