Flutter 图形（柱状图）左右移动(charts_flutter)

        学习flutter，想搞一下柱状图，发现Google粑粑有一个图形库charts_flutter，这个图形库也很强大，网上也有大佬写了，但我没找到可以左右滑动的，于是自己查了一下官网，做了一下，但是还是发现了一些问题，希望有大佬可以解决一下；      

1、首先先把图形库引入项目中:charts_flutter: ^0.9.0

2、在界面中引用导包:import 'package:charts_flutter/flutter.dart' as charts;

3、所有代码：

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

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {

  final List<OrdinalSales> data =[];

  _getSeriesData() {
    List<charts.Series<OrdinalSales, String>> series = [
      charts.Series(
          id: '销售额',
          data: data,
          domainFn: (OrdinalSales series, _) => series.year.toString(),
          measureFn: (OrdinalSales series, _) => series.sales,
          labelAccessorFn: (OrdinalSales sales, _) => '\$${sales.sales.toString()}'
      )
    ];
    return series;
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    data..add(OrdinalSales('2012',600))..add(OrdinalSales('2013',800))..add(OrdinalSales('2014',400))
      ..add(OrdinalSales('2015',500))..add(OrdinalSales('2016',850))..add(OrdinalSales('2017',450))
      ..add(OrdinalSales('2018',630))
      ..add(OrdinalSales('2019',720))..add(OrdinalSales('2020',990));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child:Column(
        children: <Widget>[
          Expanded(
              child: charts.BarChart(
                _getSeriesData(),
                animate: true,
                barGroupingType: charts.BarGroupingType.grouped,
                behaviors: [
                  // Add the sliding viewport behavior to have the viewport center on the
                  // domain that is currently selected.
                  new charts.SlidingViewport(),
                  // A pan and zoom behavior helps demonstrate the sliding viewport
                  // behavior by allowing the data visible in the viewport to be adjusted
                  // dynamically.
                  new charts.PanAndZoomBehavior(),
                  new charts.SeriesLegend(entryTextStyle: charts.TextStyleSpec(
                    fontSize: 12,
                    color: charts.Color.black,
                  )),
                ],
                barRendererDecorator: new charts.BarLabelDecorator<String>(),
                // Set an initial viewport to demonstrate the sliding viewport behavior on
                // initial chart load.
                domainAxis: new charts.OrdinalAxisSpec(
                    viewport: new charts.OrdinalViewport('2016', 6)),
              ),
          ),

          Expanded(
            child: charts.BarChart(
              _getSeriesData(),
              animate: true,
              barGroupingType: charts.BarGroupingType.grouped,
              behaviors: [
                // Add the sliding viewport behavior to have the viewport center on the
                // domain that is currently selected.
                new charts.SlidingViewport(),
                // A pan and zoom behavior helps demonstrate the sliding viewport
                // behavior by allowing the data visible in the viewport to be adjusted
                // dynamically.
                new charts.PanAndZoomBehavior(),
                new charts.SeriesLegend(entryTextStyle: charts.TextStyleSpec(
                  fontSize: 12,
                  color: charts.Color.black,
                )),
              ],
              barRendererDecorator: new charts.BarLabelDecorator<String>(),
              // Set an initial viewport to demonstrate the sliding viewport behavior on
              // initial chart load.
              domainAxis: new charts.OrdinalAxisSpec(
                  viewport: new charts.OrdinalViewport('2016', 6)),
            ),
          ),

        ],
      )
    );
  }
}


/// Sample ordinal data type.
class OrdinalSales {
  final String year;
  final double sales;
  OrdinalSales(this.year, this.sales);
}

这里我个人的理解：

        a、他是平移缩放在behaviors数组中添加了new charts.PanAndZoomBehavior()；

        b、X轴显示多少个柱子是domainAxis: new charts.OrdinalAxisSpec( viewport: new charts.OrdinalViewport('2016', 6)),来控                制，我这里是从2016开始，显示6个柱子；

       c、设置Legend字体大小和颜色是用new charts.SeriesLegend(entryTextStyle: charts.TextStyleSpec( fontSize: 12, color:                     charts.Color.black, )),

大概先了解了这么多，后续再继续啃！

对了，这里运行发现的问题是X轴的数据会超过线的边界；你们运行试试，看能不能让他隐藏起来；

小白一个，勿喷