平移和缩放时间序列条形图 - charts_flutter

Question

我正在使用 charts_flutter 在 flutter 中创建一些时间序列条形图。我一直在寻找一种方法来一次显示受控数量的缩放条并为其余条提供滑块。我可以使用 BarCharts() 完成上述操作，但不能使用 TimeSeriesCharts()。我尝试了以下链接中提出的类似问题的建议：

1. 这里
2. 这里
3. 这里

但它们都没有对视图产生任何影响。有没有办法只显示 5 天的条形图？

这是我的代码，

import 'package:bar_wow/subscriber_series.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';


class SubscriberChart extends StatefulWidget{
  final List<charts.Series<SubscriberSeries, DateTime>> data;
  final bool animate;

  SubscriberChart(this.data, this.animate);
  
  @override
  State<StatefulWidget> createState() => new _SelectionCallbackState();

}

class _SelectionCallbackState extends State<SubscriberChart> {
  DateTime _time;
  Map<String, num> _measures;
  
  _onSelectionChanged(charts.SelectionModel model) {
    final selectedDatum = model.selectedDatum;

    DateTime time;
    final measures = <String, num>{};

    if (selectedDatum.isNotEmpty) {
      time = selectedDatum.first.datum.time;
      selectedDatum.forEach((charts.SeriesDatum datumPair) {
        measures[datumPair.series.displayName] = datumPair.datum.subscribers;
      });
    }

    setState(() {
      _time = time;
      _measures = measures;
    });
  }

  @override
  Widget build(BuildContext context) {
    final children = <Widget>[
      new Container(
        height: 400,
        padding: EdgeInsets.all(20),
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                Expanded(
                  child: new charts.TimeSeriesChart(
                    widget.data,
                    animate: widget.animate,
                    defaultRenderer: new charts.BarRendererConfig<DateTime>(
                      groupingType: charts.BarGroupingType.groupedStacked,
                      //barRendererDecorator: new charts.BarLabelDecorator<String>(),
                    ),
                    defaultInteractions: false,
                    behaviors: [
                      new charts.SelectNearest(), new charts.DomainHighlighter(),
                      new charts.ChartTitle(
                        'Response Time',
                        behaviorPosition: charts.BehaviorPosition.top,
                        titleOutsideJustification: charts.OutsideJustification.start,
                        innerPadding: 18
                      ),
                      new charts.ChartTitle(
                        'Time ?',
                        behaviorPosition: charts.BehaviorPosition.bottom,
                        titleOutsideJustification:
                        charts.OutsideJustification.middleDrawArea),
                      new charts.ChartTitle(
                        'Aggregate ?',
                        behaviorPosition: charts.BehaviorPosition.start,
                        titleOutsideJustification:
                        charts.OutsideJustification.middleDrawArea),
                      new charts.SeriesLegend(),
                      new charts.SlidingViewport(),
                      new charts.PanAndZoomBehavior(),
                    ],
                    domainAxis: new DateTimeAxisSpec(
                      viewport: charts.DateTimeExtents(start: DateTime(2020,5,7), end: DateTime.now().add(Duration(days: 5 ))),
                    ),
                    selectionModels: [
                      new charts.SelectionModelConfig(
                        type: charts.SelectionModelType.info,
                        changedListener: _onSelectionChanged,
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ];

    if (_time != null) {
      children.add(new Padding(
          padding: new EdgeInsets.only(top: 5.0),
          child: new Text(_time.toString())));
    }
    _measures?.forEach((String series, num value) {
      children.add(new Text('$series: $value'));
    });

    return new Container(child:Padding(padding:EdgeInsets.all(10),child:Column(children: children),),);
  }
}

Answer 1

您需要覆盖axis.autoViewportinDateTimeAxisSpec.configure并将其设置为false。为此，您可以扩展 DateTimeAxisSpec 来更新配置。

class DateTimeAxisSpecManualViewport extends DateTimeAxisSpec {

  const DateTimeAxisSpecManualViewport ({
    RenderSpec<DateTime> renderSpec,
    DateTimeTickProviderSpec tickProviderSpec,
    DateTimeTickFormatterSpec tickFormatterSpec,
    bool showAxisLine,
  }) : super(
            renderSpec: renderSpec,
            tickProviderSpec: tickProviderSpec,
            tickFormatterSpec: tickFormatterSpec,
            showAxisLine: showAxisLine);

  @override
  configure(Axis<DateTime> axis, ChartContext context,
      GraphicsFactory graphicsFactory) {
    super.configure(axis, context, graphicsFactory);
    
    // Disable autoViewport
    axis.autoViewport = false;
  }
}

然后设置DateTimeAxisSpecManualViewport并charts.TimeSeriesChart.domainAxis()配置轴的开始和结束日期。

charts.TimeSeriesChart(
  domainAxis: DateTimeAxisSpecManualViewport(...),
)