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

Question

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

这是我的代码，但结果输出正常。我正在使用 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)),
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      }
    }    

我的输出图像在下面

标签： flutterlinechart

Answer 1

我检查了你分享的两张图片，我能看到的唯一区别似乎只是这些图表上使用的不同颜色。您可以尝试使用fl_chart插件来查看它是否适合您的用例。使用fl_chart，它允许您修改文档中详细说明的图表颜色。