Flutter 图表插件 fl_chart 使用研究（一）

Flutter 图表插件 fl_chart 使用研究（以Line chart 为例子）

LineChart(LineChartData(// 大部分属性都在这里面写),
);

看LineChart的源码，发现LineChart 构造函数还有一个命名参数：swapAnimationDuration，猜测是控制动画的时间间隔，默认是150毫秒，也就是说，fl_chart默认支持动画。

进入LineChartData类中，其构造函数的参数较多，其中，最重要的一个，也就是我们放数据的地方，是lineBarsData。注意，这个参数值是一个List对象，也就是一个LineChartBarData对象数组，其中的每一个LineChartBarData对象，代表图上的一条曲线，所以，fl_chart 可以在图上显示多条曲线。

进入LineChartBarData的构造函数，我们发现了spots这一命名参数，他就是真正的放数据的地方了。每一个数据点都是一个FlSpot对象，就像这样：

FlSpot(1.0, 23)

代表的是x=1.0，y=23这一数据点。

注意：看FlSpot构造函数，发现x和y坐标都必须是double类型（或int型），因此数据点坐标不能是字符串类型或其他什么类型，，如果需要在横轴显示x坐标是字符串，需要后文的转换。

fl_chart的大多数参数都有默认值，因此，只需要给出数据点，fl_chart就能画线了，像下面的代码：

import 'package:flutter/material.dart ';
import 'package:fl_chart/fl_chart.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Home(),);}
}class Home extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: MyLineChart(),),);}
}class MyLineChart extends StatelessWidget {@overrideWidget build(BuildContext context) {// 第一条线List spots1 = [FlSpot(1, 1),FlSpot(3, 1.5),FlSpot(5, 1.4),FlSpot(7, 3.4),FlSpot(9, 2),FlSpot(11, 2.2),FlSpot(13, 1.8),];// 第二条线List spots2 = [FlSpot(2, 1),FlSpot(4, 1.5),FlSpot(6, 1.4),FlSpot(8, 3),FlSpot(10, 1.6),FlSpot(12, 2.2),];return LineChart(LineChartData(lineBarsData: [LineChartBarData(spots: spots1,),LineChartBarData(spots: spots2,),],),);}
}

运行一下，看看结果：

未完待续。。。。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！