Flutter 利用 fl |
您所在的位置：网站首页 › aac音频文件下载到手机 › Flutter 利用 fl |
|
在生活中，我们经常在数学问题中用到统计图表来分析数据，判断数据走向。在很多软件中，我们也会在周末或月末收到数据的汇总图表，方便我们查看数据，分析问题，今天我们就在 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? 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, }) 参数说明2想要更加细致的了解 ：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 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 ，观察统计图效果。运行结果如图： 运行结果继续学习flutter |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |