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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyLineChart(),
      ),
    );
  }
}

class MyLineChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 第一条线
    List<FlSpot> 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<FlSpot> 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,
          ),
        ],
      ),
    );
  }
}

运行一下，看看结果：

 

 

未完待续。。。。