一、背景
我们flutter页面里需要展示图表，而且开发时间比较紧张，如果自己绘制，时间肯定不够。于是去pub上逛了一圈，发现几个分数比较高的图表库，fl_chart,flutter_chart,mp_chart。
fl_chart：对Dart版本要求比较高，我的低版本SDK中，extension关键字还在试验阶段，支持不太好。
flutter_chart：功能比较简单，画风也和我们需求的不太一样，而且作者放在github上的博客教程已经失效，所以没有选择。
mp_chart：功能齐备，而且API都和MPAndroidChart差不多，是MPAndroidChart的flutter版本，对于用过MPAndroidChart库的同学来说，很容易上手。有的功能如果不知道mp_chart该如何实现，可以百度MPAndroidChart是怎么实现的，然后照葫芦画瓢。
二、简单使用
1.在pubspec.yaml引入依赖：
dependencies:
mp_chart: ^0.1.9不过我在这里遇到了几个问题：
问题一：mp_chart引入了image_gallery_saver库，在iOS上用cocopods引入依赖失败，无法运行。
解决方案：clone代码，去掉依赖，注释使用代码，本地引入。这个库在mp_chart里的作用是保存截图，应该可以在example里依赖的，不知道为什么作者会在lib库中引入。
问题二：mp_chart依赖的intl版本与flutter_localizations的冲突。
解决方案：修改intl版本，本地引入。解决版本冲突的详细情况可查看我的另一篇博客：解决flutter 依赖版本冲突的n种方法
由于以上问题都需要本地引入才能解决，所以最终在pubspec.yaml中的引入如下：
dependencies:
mp_chart:
path: mp_chart/2.代码填充数据：
流程大概如下（以PieChar为例）：
- 初始化数据列表
- 构建Entry列表
- 构建DataSet
- 构建Data
- 构建Controller
- 将Data与Controller绑定
- 构建Chart
buildPieChart(){
// 初始化数据列表
List values = [4.0,7.2,3,5.5,6];
//构建Entry列表
List<PieEntry> entryList = [];
for(int i = 0; i < values.length; i++) {
PieEntry entry = PieEntry(value:values[i]);
entryList.add(entry);
}
//构建DataSet
PieDataSet dataSet = PieDataSet(entryList,"label");
//构建Data
PieData data = PieData(dataSet);
//构建Controller
PieChartController controller = PieChartController();
//将Data与Controller绑定
controller.data = data;
//构建Chart
PieChart chart = PieChart(controller);
// 完成！！
return chart;
}3.一些修饰：
mp_chart功能很强大，它开放了太多可以自定义的属性，例如缩放、旋转、点击等事件，都在内部进行了封装，修改颜色、坐标轴、网格线等基本功能更不在话下。
下面是记录了我开发是需要处理的问题，已经实现方式，非常零散，真正想用的时候看下源码就知道。
环状图
- dataSet.setColors1和setColors2的区别？
答：colors1和colors2一样，不过colors2能改变透明度。- 怎么去掉数字？
答：dataSet.setDrawValues- 怎么去掉解释色块和label？
controller的lengendSettingFunction中，legend.enable = false;- 去掉圆心小环形？
controller的transparentCircleRadiusPercent设置为0.它指透明圆环与外圆半径的占比。- 怎么添加中心圆孔，变成环形？
controller的drawHole默认为true。设为false即没有圆孔- 控制圆的大小
controller的minOffset- 关闭旋转
rotateEnabled不可用。返馈之后已修复。- 为什么在Stack里，环状图宽高不生效？自定义控件会导致Stack错位？点击无效？
绘制Description有bug，设置Description.enable = false 后正常- 怎么添加动画效果？
controller.animator…reset()…animateY2(1000, Easing.EaseInOutQuad);柱状图
- 去掉y轴网格
controller里的axisSettingFunction中，设置axis.drawGridLines = false;- 去掉点击
dataSet.setHighlightEnable(false)- 去掉value
dataSet.setDrawValues(false)- 设置宽度
controller.data.barWidth = 1;- 坐标数字太密集
controller里的axisSettingFunction中，axis.setLabelCount1()- 修改坐标轴字体
controller里的axisSettingFunction中，axis.typeface = TypeFace(fontFamily:“MaoTi”)
由于mp_chart发布不久，还有一些小bug是正常的。不过作者维护很积极，基本上只要在github上提issue，当天就能修复。比如设置Description.enable = true时布局异常问题，还有环状图rotateEnabled = false无效问题，我提了issue之后立刻就修复了。
