在生活中，我们经常在数学问题中用到统计图表来分析数据，判断数据走向。在很多软件中，我们也会在周末或月末收到数据的汇总图表，方便我们查看数据，分析问题，今天我们就在 flutter 环境中利用 fl_chart 简单描摹一下。
类似：
1.我们了解作图工具 fl_chart （插件）。
fl_chart 是一个强大的Flutter图表库，目前支持折线图、条形图和饼图。
2.我们查看源代码，了解使用方法和组件属性。
折线统计图
const LineChart(
this.data, {
Duration swapAnimationDuration = const Duration(milliseconds: 150),
Curve swapAnimationCurve = Curves.linear,
})
统计图数据项
LineChartData({
List<LineChartBarData>? lineBarsData,
List<BetweenBarsData>? betweenBarsData,
FlTitlesData? titlesData,
ExtraLinesData? extraLinesData, //外部行数据
LineTouchData? lineTouchData, //线路接触数据
List<ShowingTooltipIndicators>? showingTooltipIndicators, //显示工具提示指示器
FlGridData? gridData,
FlBorderData? borderData,
FlAxisTitleData? axisTitleData,
RangeAnnotations? rangeAnnotations, //范围注释
double? minX,
double? maxX,
double? minY,
double? maxY,
FlClipData? clipData,
Color? backgroundColor,
})
折线图条形图数据
LineChartBarData({
List<FlSpot>? spots,
bool? show,
List<Color>? colors,
List<double>? colorStops,
Offset? gradientFrom,
Offset? gradientTo,
double? barWidth,
bool? isCurved,
double? curveSmoothness,
bool? preventCurveOverShooting,
double? preventCurveOvershootingThreshold,
bool? isStrokeCapRound,
BarAreaData? belowBarData,
BarAreaData? aboveBarData,
FlDotData? dotData,
List<int>? showingIndicators,
List<int>? dashArray,
Shadow? shadow,
bool? isStepLineChart,
LineChartStepData? lineChartStepData,
})
想要更加细致的了解 ：fl_chart
3.新建项目并导入依赖包。
新建项目，命名为 Chart_demo 。
在项目文件中找到 pubspec.yaml 文件，然后在 dependencies: 标签下添加 fl_chart: ^0.30.0 依赖，接下来运行 pub get 命令。
4.如果依赖导入成功，我们在 lib 文件夹中编写代码。
图表文件：
LineChartData mainData() {
return LineChartData(
/*axisTitleData: FlAxisTitleData(
),*/
//clipData: FlClipData.vertical()
/*extraLinesData: ExtraLinesData(
extraLinesOnTop: true,
verticalLines: [
VerticalLine(x: 8.9,label: VerticalLineLabel(show: true) ,),
],
),*/
clipData: FlClipData(left: true, bottom: true, top: true, right: true),
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
drawVerticalLine: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
getDrawingVerticalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
getTextStyles: (context,value) => const TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
),
getTitles: (value) {
if(value.toInt()%2==0){
int value2=value.toInt()+1;
return value2.toString()+'月';
}
return (value.toInt()+1).toString();
},
margin: 8,
),
leftTitles: SideTitles(
showTitles: true,
getTextStyles: (context,value) => TextStyle(
color: Color(0xff67727d),
fontWeight: FontWeight.bold,
fontSize: 15,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '10箱';
case 2:
return '20箱';
case 3:
return '30箱';
case 4:
return '40箱';
case 5:
return '50箱';
case 6:
return '60箱';
}
return '';
},
reservedSize: 28,
margin: 12,
),
),
borderData: FlBorderData(show: true, border: Border.all(color: const Color(0xff37434d), width: 1)),
minX: 0,
maxX: 11,
minY: 0,
maxY: 7,
lineBarsData:linesBarData1(),
);
}
List<LineChartBarData> linesBarData1() {
final LineChartBarData lineChartBarData1 = LineChartBarData(
spots: [
FlSpot(0, 5),
FlSpot(1, 4),
FlSpot(2, 1),
FlSpot(3, 2),
FlSpot(4, 2.5),
FlSpot(5, 1),
FlSpot(6, 2),
FlSpot(7, 4),
FlSpot(8, 3),
FlSpot(9, 5),
FlSpot(10, 3),
FlSpot(11, 4),
],
isCurved: true,
colors: gradientColors,
barWidth: 5,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
colors: gradientColors.map((color) => color.withOpacity(0.3)).toList(),
),
);
return [lineChartBarData1];
}
页面布局文件：
Scaffold(
appBar:AppBar(title:Text("Chart 图表"),),
body:Center(
child:Stack(
children: [
Container(
width:600,
decoration:const BoxDecoration(
borderRadius:BorderRadius.all(
Radius.circular(21),
),
color:Color(0xff232d37),
),
child:Padding(
padding:const EdgeInsets.only(right:22.0, left:18.0, top:34, bottom:12),
child:LineChart(
mainData(),
),
),
),
Positioned(
child:Text('2021年哇哈哈饮品销量统计',
style:TextStyle(fontSize:18, color: Colors.blue,decoration: TextDecoration.none),
),
top:2,
right:0,
),
Positioned(
top:5,
left:6,
child:Text(
'销量',
style:TextStyle(
fontSize:15, color: Colors.white,decoration: TextDecoration.none),
),
),
],
),
),
);
5.检查代码中是否有错误。
6.运行主文件 main.dart ，观察统计图效果。
运行结果如图：
