Flutter图表库fl_chart的使用解析-折线图

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
 
class LineChartSample extends StatefulWidget {
  @override
  _LineChartSampleState createState() => _LineChartSampleState();
}
 
class _LineChartSampleState extends State<LineChartSample> {
  List<LineChartBarData> bars;
 
  @override
  void initState() {
    super.initState();
    bars = [
      LineChartBarData(
        spots: [
          FlSpot(1, 1),
          FlSpot(3, 1.5),
          FlSpot(5, 1.4),
          FlSpot(7, 1.6),
          FlSpot(9, 1.7),
          FlSpot(11, 2),
          FlSpot(13, 2.2),
        ],
        isCurved: true,
        colors: [Colors.blue],
        barWidth: 2,
        isStrokeCapRound: true,
        dotData: FlDotData(
          show: false,
        ),
        belowBarData: BarAreaData(
          show: true,
          colors: [
            Colors.blue.shade100,
          ],
        ),
      ),
      // 可以添加更多的折线数据
    ];
  }
 
  @override
  Widget build(BuildContext context) {
    return LineChart(
      LineChartData(
        lineBarsData: bars,
        // 其他配置...
      ),
    );
  }
}

这个代码示例展示了如何在Flutter中使用fl_chart包创建一个折线图。首先，我们在initState方法中初始化了一个LineChartBarData列表，每个LineChartBarData代表折线图中的一条折线。我们为每条折线指定了一系列数据点FlSpot，并设置了折线的样式，如是否圆滑（isCurved）、颜色以及柱宽等。此外，我们还可以通过belowBarData配置折线下方的填充区域。最后，在build方法中，我们创建了一个LineChart小部件并传入了LineChartData，其中包含了我们之前定义的折线数据。