如何在Flutter中创建自定义折线图？

Question

我只想在我的flutter应用程序中绘制折线图，​​如下图所示。

[下面的链接图像是我要创建图像的折线图]

https://i.stack.imgur.com/9s8vN.jpg

这是我的代码，但结果输出正常。我正在使用Charts_flutter：^ 0.9.0包。

import 'package:flutter/material.dart';

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

import 'data/sale_data.dart';

class LineChart extends StatelessWidget {
  // Defining the data
  final data = [
    new SalesData(1, 7),
    new SalesData(2, 19),
    new SalesData(3, 6),
    new SalesData(4, 3),
    new SalesData(5, 10),
    new SalesData(6, 21),
    new SalesData(7, 3),
    new SalesData(8, 10),
    new SalesData(9, 5),
    new SalesData(10, 15),
    new SalesData(11, 8),
    new SalesData(12, 12),
    new SalesData(13, 6),
    new SalesData(14, 18),
    new SalesData(15, 4),
    new SalesData(16, 8),
    new SalesData(17, 3),
    new SalesData(18, 12),
    new SalesData(19, 7),
    new SalesData(20, 3),
    new SalesData(21, 8),
    new SalesData(22, 12),
    new SalesData(23, 6),
    new SalesData(24, 18),
    new SalesData(25, 4),
    new SalesData(26, 8),
    new SalesData(27, 3),
    new SalesData(28, 12),
    new SalesData(29, 7),
    new SalesData(30, 3),
    new SalesData(31, 8),
    new SalesData(32, 12),
    new SalesData(33, 6),
    new SalesData(34, 18),
    new SalesData(35, 4),
    new SalesData(36, 8),
    new SalesData(37, 3),
    new SalesData(38, 12),
    new SalesData(39, 7),
    new SalesData(40, 3),
  ];

  _getSeriesData() {
    List<charts.Series<SalesData, int>> series = [
      charts.Series(
          //dot color is fillcolorfn
          fillColorFn: (SalesData series, _) =>
              charts.MaterialPalette.green.shadeDefault,
          //seriesColor: charts.ColorUtil.fromDartColor(Colors.red),

          id: "Sales",
          data: data,
          patternColorFn: (SalesData series, _) => charts.MaterialPalette.white,
          // areaColorFn: ((SalesData series, _) => charts.MaterialPalette.black),
          domainUpperBoundFn: (SalesData series, _) => series.domainUpper,
          domainLowerBoundFn: (SalesData series, _) => series.domainLower,
          measureUpperBoundFn: (SalesData series, _) => series.measureUpper,
          measureLowerBoundFn: (SalesData series, _) => series.measureLower,
          domainFn: (SalesData series, _) => series.year,
          measureFn: (SalesData series, _) => series.sales,
          colorFn: (SalesData series, _) =>
              charts.MaterialPalette.red.shadeDefault),
    ];

    return series;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil().setHeight(800),
      child: Card(
        color: Colors.white,
        child: Padding(
          padding: EdgeInsets.only(
            left: ScreenUtil().setWidth(20),
            right: ScreenUtil().setWidth(20),
          ),
          child: Column(
            children: <Widget>[
              // Text(
              //   "Sales of a company over the years",
              //   style: TextStyle(fontWeight: FontWeight.bold),
              // ),
              // SizedBox(
              //   height: 20,
              // ),
              Padding(
                padding: EdgeInsets.only(
                  top: ScreenUtil().setWidth(20),
                ),
                child: Align(
                  alignment: Alignment.centerRight,
                  child: Container(
                    alignment: Alignment.topRight,
                    color: Colors.white,
                    height: ScreenUtil().setHeight(50),
                    width: ScreenUtil().setWidth(100),
                    child: Text("hello"),
                  ),
                ),
              ),

              Expanded(
                child: new charts.LineChart(
                  _getSeriesData(),
                  animate: true,

                  // domainAxis: new charts.NumericAxisSpec(
                  //     // Set the initial viewport by providing a new AxisSpec with the
                  //     // desired viewport, in NumericExtents.
                  //     viewport: new charts.NumericExtents(0.0, 40.0)),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

我的输出图像在下面

[以上代码的输出图像] https://i.stack.imgur.com/zt4Qe.jpg