折线统计图是以折线的上升或下降来表示统计数量的增减变化的统计图。折线统计图用折线的起伏表示数据的增减变化情况，它不仅可以表示数量的多少，而且可以反映数据的增减变化情况。
在生活中，我们经常在数学问题中用到统计图表来分析数据，判断数据走向。
在天气预报中用折线统计图反映气温的变化情况；在人口普查的过程中用折线统计图反映人口的变动情况；在商超销售的过程中用折线统计图显示销售情况，分析进货量。
今天我们就在 flutter 环境中利用fl_chart 插件来简单制作一个折线统计图。
开发步骤：
1.第一步我们简单了解一下我们用到的 fl_chart 插件，熟悉它的使用方法和应用场景。
2.查看 fl_chart 插件的源代码，查看它的属性和方法。
折线统计图：
const LineChart(
this.data, {
Duration swapAnimationDuration = const Duration(milliseconds: 150),
Curve swapAnimationCurve = Curves.linear,
})
统计图数据项：
LineChartData({
List? lineBarsData,
List? betweenBarsData,
FlTitlesData? titlesData,
ExtraLinesData? extraLinesData, //外部行数据
LineTouchData? lineTouchData, //线路接触数据
List? showingTooltipIndicators, //显示工具提示指示器
FlGridData? gridData,
FlBorderData? borderData,
FlAxisTitleData? axisTitleData,
RangeAnnotations? rangeAnnotations, //范围注释
double? minX,
double? maxX,
double? minY,
double? maxY,
FlClipData? clipData,
Color? backgroundColor,
})
折线图数据及图表设计：
LineChartBarData({
List? spots,
bool? show,
List? colors,
List? colorStops,
Offset? gradientFrom,
Offset? gradientTo,
double? barWidth,
bool? isCurved,
double? curveSmoothness,
bool? preventCurveOverShooting,
double? preventCurveOvershootingThreshold,
bool? isStrokeCapRound,
BarAreaData? belowBarData,
BarAreaData? aboveBarData,
FlDotData? dotData,
List? showingIndicators,
List? dashArray,
Shadow? shadow,
bool? isStepLineChart,
LineChartStepData? lineChartStepData,
})
详细文档请点击：fl_chart class
3.新建项目并在项目中导入依赖。
新建 Flutter 项目，命名为 LineChart_demo 。
在项目文件中找到 pubspec.yaml 文件，然后在 dependencies: 标签下添加 fl_chart: ^0.30.0 依赖，接下来运行 pub get 命令。
显示运行成功即可。
4.导入成功后在项目文件中的【lib 文件夹】编写程序代码。
整体布局代码：
Scaffold(
appBar:AppBar(
title:const Text('Flutter Line Statistical Chart'),
backgroundColor: Colors.greenAccent,
),
body:Center(
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
LineCharts(),
Padding(
padding:const EdgeInsets.all(15.0),
child:Text(
"近年本科学生考研人数统计图",
style:TextStyle(
fontSize:27,
color: Colors.purple,
fontWeight: FontWeight.w600,
fontStyle: FontStyle.italic
),
),
),
],
),
),
);
折线统计图构建代码：
Widget LineCharts(){
const valueTextStyle=TextStyle(fontSize: 12, color: Colors.orangeAccent);
return SizedBox(
width: 360,
height: 420,
child: LineChart(
LineChartData(
lineTouchData: LineTouchData(enabled: true,),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 177),
FlSpot(1, 201),
FlSpot(2, 238),
FlSpot(3, 290),
FlSpot(4, 341),
FlSpot(5, 377),
],
isCurved: true,
barWidth: 1.6,
colors: [
Colors.black,
],
belowBarData: BarAreaData(
show: true,
colors: [Colors.lightBlue.withOpacity(0.5)],
cutOffY: cutOffYValue,
applyCutOffY: true,
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.lightGreen.withOpacity(0.6)],
cutOffY: cutOffYValue,
applyCutOffY: true,
),
dotData: FlDotData(
show: true,
),
),
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 10,
getTextStyles: (value) => yearTextStyle,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2016';
case 1:
return '2017';
case 2:
return '2018';
case 3:
return '2019';
case 4:
return '2020';
case 5:
return '2021';
default:
return '';
}
}
),
leftTitles: SideTitles(
showTitles: true,
getTextStyles: (value) => valueTextStyle,
getTitles: (value) {
return '${value}';
},
),
),
axisTitleData: FlAxisTitleData(
leftTitle: AxisTitle(showTitle: true, titleText: '考研人数（万）', margin: 12,textAlign: TextAlign.center,textStyle: yearTextStyle),
bottomTitle: AxisTitle(
showTitle: true,
margin: 10,
titleText: '年份',
textStyle: yearTextStyle,
textAlign: TextAlign.right
),
),
clipData: FlClipData(left: true, bottom: true, top: true, right: true),
gridData: FlGridData(
show: true,
getDrawingHorizontalLine: (value) {
if(value == 177 || value == 201 || value == 238 || value == 290 || value == 341 || value == 390){
return FlLine(
color: const Color(0xfff7434d),
strokeWidth: 1,
);
}
},
getDrawingVerticalLine: (value) {
return FlLine(
color: const Color(0xff279885),
strokeWidth: 1,
);
},
),
),
),
);
}
5.UI 主界面布局层次如下图：
6.检查项目文件中程序代码是否有错误，然后配置主运行文件 main.dart 。
7.检查完后运行主文件 main.dart ，观察界面效果。
8.运行显示如下图所示：
