Flutter —— 二：如何绘制图表charts_flutter

        最近做了个项目需要有折线图和饼图 因为能查找到的资料很少 实现的过程比较艰难 所以记录下来。做的时候用到了 fl_chart 和 charts_flutter 两个库，今天先讲charts_flutter 。

charts_flutter的文档里面有丰富的示例图和示例代码。可以选择自己想要的样式的示例代码进行查看。

这次做的是饼图，就截一张饼图的示例图，每个点进去都有完整的示例代码。

接下来开始动手：

1.添加依赖

        打开项目下的pubspec.yaml文件，在 dependencies 下添加 charts_flutter: ^0.9.0 (添加完别忘了flutter pub get，最新版请在charts_flutter上查看)

2.示例代码（初识）

先拿到上图中第一个的示例代码，放到自己的项目中跑起来看看效果。

/// Simple pie chart example.
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

class SimplePieChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  SimplePieChart(this.seriesList, {this.animate});

  /// Creates a [PieChart] with sample data and no transition.
  factory SimplePieChart.withSampleData() {
    return new SimplePieChart(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new charts.PieChart(seriesList, animate: animate);
  }

  /// Create one series with sample hard coded data.
  static List<charts.Series<LinearSales, int>> _createSampleData() {
    final data = [
      new LinearSales(0, 100),
      new LinearSales(1, 75),
      new LinearSales(2, 25),
      new LinearSales(3, 5),
    ];

    return [
      new charts.Series<LinearSales, int>(
        id: 'Sales',
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}

/// Sample linear data type.
class LinearSales {
  final int year;
  final int sales;

  LinearSales(this.year, this.sales);
}

跑起来后，就跟示例图一样。

3.示例代码分析（认知）

  @override
  Widget build(BuildContext context) {
    return new charts.PieChart(seriesList, animate: animate);
  }

        首先，创建饼图的方式为 new charts.PieChart();,然后在括号里传入所需的参数。在AndroidStudio中按住ctrl，并将光标移到PieCHart上可以看到具体的参数信息。示例代码中，传入了seriesList和animate。
        1.seriesList： 既然是饼图，那就需要数据，根据不同数据的大小，来显示不同的占比。
这里的数据类型为List<charts.Series<LinearSales, int>>,很明显这是库定义的类型，我们只要学会怎么去生成这种数据，就能放入饼图中使用。
        首先是创建一个数据模型，可以根据自己的需求进行定义。示例代码中定义的LinearSales 有两个属性，分别为year和sales，顾名思义应该是不同年份的销量进行对比。

class LinearSales {
  final int year;
  final int sales;

  LinearSales(this.year, this.sales);
}

创建完后，就可以生成数据了，下面是示例代码中的数据。

 static List<charts.Series<LinearSales, int>> _createSampleData() {
   final data = [
     new LinearSales(0, 100),
     new LinearSales(1, 75),
     new LinearSales(2, 25),
     new LinearSales(3, 5),
   ];

   return [
     new charts.Series<LinearSales, int>(
       // 1.id:这里要求填入一个id，既然人家要求了那就设置一个以免出现问题吧。
       id: 'Sales',
       // 2.domianFn:这个属性相当于折线图或柱状图的横坐标
       domainFn: (LinearSales sales, _) => sales.year,
       // 3.measureFn:这个属性相当于折线图或柱状图的纵坐标，也就是比较的数值
       measureFn: (LinearSales sales, _) => sales.sales,
       // 4.data:这个就是要传入的自己的数据
       data: data,
     )
   ];
 }

简单的说下return里的内容： 遍历data中的数据，先拿出第一个LinearSales(0, 100),然后domainFn中的sales即为LinearSales(0, 100)，此时的sales.year就是0，measureFn中也一样，此时的sales.sales就是100。之后以此类推拿出第二个第三个数据。

        2.animate： bool类型。是true的时候，会有一个动画效果（生成时的动画）。效果如下：

4.扩展（关键）

        很明显，我们平时项目要求的样式，和这个示例图有着不小的出入，我们该如何去根据自己的需求来进行修改。
        在charts.PieChart中，有个属性叫defaultRenderer，根据名字可以认为这是一个默认渲染，当没有重写的时候，默认的就是上面示例图的样式，而我们可以根据自己的需求通过new charts.ArcRendererConfig()的方式重写这个属性。

  @override
  Widget build(BuildContext context) {
    return new charts.PieChart(
      seriesList, 
      defaultRenderer: new charts.ArcRendererConfig(
        arcWidth: int,
        arcRendererDecorators: []，
        ... // 这里有挺多属性的 由于我项目中只用到了上面2个属性 所以没有深究其他的 有兴趣的可以自己看源码
     )
    );
  }

1.arcWidth: 下图是arcWidth设置为40的样式，arcWidth的值即为圆环的宽度，值越小，宽度越小

2.arcRendererDecorators: 之前的图里都没有文字，看起来不直观，不知道哪部分是什么。通过这个属性，可以把内容显示出来。
        先介绍一下部分属性，分别为labelPosition，showLeaderLines，leaderLineStyleSpec，insideLabelStyleSpec，outsideLabelStyleSpec。剩余的可以看源码了解

        labelPosition： 可以控制文字在饼图内部还是外部，设置成inside时在里面，outside时在外面，也可以设置成auto，默认内部，当文字显示不下时会自动放在外面。当文字在内部的时候，跟LeaderLine有关的内容就不生效，因为指引线是跟外面的文字所连接的。
        showLeaderLines： 该属性用来控制文字在外面时显不显示指引线，默认是true即显示。
        其他三个Spec结尾的属性： Spec结尾的均为设置样式，根据名字可以知道分别是内部文字样式，外部文字样式和指引线样式，可以根据下面代码查看编写方式，并不难。不过需要注意其中的Color类需要用该库中的Color类。需要通过charts.ColorUtil.fromDartColor(Colors.orange）的方式在（）传入颜色值来设置颜色。

arcRendererDecorators: [
 new charts.ArcLabelDecorator(
      labelPosition: charts.ArcLabelPosition.outside,
      showLeaderLines: true,
      insideLabelStyleSpec: charts.TextStyleSpec(
	    color: charts.ColorUtil.fromDartColor(Colors.orange),
	    fontSize: 14),
      outsideLabelStyleSpec: charts.TextStyleSpec(
        color: charts.ColorUtil.fromDartColor(Colors.orange),
        fontSize: 14),
      leaderLineStyleSpec: charts.ArcLabelLeaderLineStyleSpec(
        color: charts.ColorUtil.fromDartColor(Colors.orange),
        length: 15.0,
        thickness: 1.0
      ),
    )
]

上面代码的效果如下：

        现在为止，可以发现一个问题，刚才的样式设置，都是统一的，一设置，所有文字的颜色都会变。假如我们需要对不同的文字设置不同的颜色，同时将饼图中各部分的颜色设置成和文字相同，那么就需要在数据中设置。即示例代码中的seriesList。因为涉及到颜色值，所以我们修改一下数据模型和数据。

首先是数据模型，这里将year改成String只是为了说明该类型不局限于int

class LinearSales {
  String year;
  int sales;
  Color colorVal;

  LinearSales(this.year, this.sales,this.colorVal);
}

下面是数据：
        colorFn： 在这里传入sales.colorVal就可以改变饼图各部分的颜色了。
        outsideLabelStyleAccessorFn： 这里是外部文字样式，也可以传入sales.colorVal来设置颜色
        labelAccessorFn： 这个是显示的文字，通过自己的拼接显示出相应格式的文字。下面代码中的'${sales.year}： ${sales.sales}'对应的第一个数据就是 2017:95

  List<charts.Series<LinearSales, String>> _createSampleData() {
    final data = [
      new LinearSales('2017', 95, Colors.red),
      new LinearSales('2018', 75, Colors.grey),
      new LinearSales('2019', 25, Colors.green),
      new LinearSales('2020', 5, Colors.blue),
    ];

    return [
      new charts.Series<LinearSales, String>(
        id: 'Sales',
        data: data,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        colorFn: (LinearSales sales, _) =>   charts.ColorUtil.fromDartColor(sales.colorVal),
        labelAccessorFn: (LinearSales sales, _) => '${sales.year}：${sales.sales}',
        outsideLabelStyleAccessorFn: (LinearSales sales, _) =>
         charts.TextStyleSpec(
            fontSize: 12,
            color: charts.ColorUtil.fromDartColor(sales.colorVal),
          )
      )
    ];
  }

下面是相应的界面：

问题： 指引线暂时没看到如何单独设置颜色，不知道有没有看漏什么。第一次花心思写博客，如果哪里有问题或者有什么意见和建议都可以提。
demo已上传