继续创作，加速生长！这是我参加「日新方案 10 月更文挑战」的第 11 天，点击检查活动概况
前语
上一篇 《Flutter 制作探究 | 扇形区域与点击校验》 中，咱们现已完成了 扇形区域途径 的生成，和校验点击手势的功用：
本篇，将依据扇形区域，完成最基本的饼图制作作用，以及简略的点触激活作用：
1. 饼图根底制作
一个 SectorShape 对象对应着界面上的一个扇形区域。如下所示，是 startAngle 为 -90 ,扫描 108 的图形：
SectorShape shape = SectorShape(
center: Offset(size.width / 2, size.height / 2),
innerRadius: innerRadius,
outRadius: 80,
startAngle: -pi/2,
sweepAngle: 0.3* 2 * pi,
);
对于一个饼图而言，便是若干个不同颜色的扇形区域顺次排放的作用。而 数据 决议扇形区域个数和扫描视点。接下来完成一下依据数值列表，烘托对于的饼图：
final List<double> data = [0.3,0.3,0.15,0.1,0.15];
下面是通过数据列表映射出 SectorShape 列表的办法，主要逻辑是遍历数据，依据是数据决议其实视点和扫描视点：
List<SectorShape> mapShapeByData(List<double> data, Size size) {
List<SectorShape> shapes = [];
double cursor = 0;
final Offset center = Offset(size.width / 2, size.height / 2);
for (int i = 0; i < data.length; i++) {
SectorShape shape = SectorShape(
center: center,
innerRadius: 40,
outRadius: 80,
startAngle: -pi / 2 + cursor * 2*pi,
sweepAngle: data[i] * 2 * pi,
);
shapes.add(shape);
cursor += data[i];
}
return shapes;
}
然后在制作是遍历制作即可，这样不同的数据就能有不同的展现作用，这便是数据的可视化展现。
final List<double> data = [0.2, 0.3, 0.15, 0.2, 0.15];
List<SectorShape> shapes = mapShapeByData(data, size);
for (int i = 0; i < shapes.length; i++) {
paint.color = colors[i];
canvas.drawPath(shapes[i].formPath(), paint);
}
在创立 SectorShape 对象时，能够通过 innerRadius 的巨细确认空泛的巨细，比方下面是 innerRadius = 0 的作用，即实心饼图：
2. 对一组数据的处理
上面的 data 数据必须是表明的还是占比，必须之和为 1 。那如何依据一组数据，来展现饼图呢？比方下面是七本小册的销量，想看一下占比状况：
final List<double> data = [944, 1141, 910, 1094, 1589,1423,2956];
这道题应该小学生都会做，便是算份额呗。只要将数据与处理一下即可:
List<double> preprocess(List<num> data){
num sum =0;
data.forEach((e) => sum+=e);
return data.map((e) => e/sum).toList();
}
这样就能够展现出七本小册的销量状况，但是目前图中无法反响哪本是哪个部分。所以咱们需要处理一下图例。
3. 图例处理
在处理图例之前，先封装一下数据，如下 SaleData 中存储称号和销量数据：
class SaleData {
final String name;
final int value;
const SaleData({
required this.name,
required this.value,
});
}
然后预备一下测试数据：
static const List<SaleData> test = [
SaleData(name: "Flutter 言语根底 - 梦始之地",value: 944),
SaleData(name: "Flutter 烘托机制 - 聚沙成塔",value: 910),
SaleData(name: "Flutter 布局探究 - 薪火相传",value: 1094),
SaleData(name: "Flutter 滑动探究 - 珠联璧合",value: 1141),
SaleData(name: "Flutter 动画探究 - 流光幻影",value: 1589),
SaleData(name: "Flutter 手势探究 - 执掌全国",value: 1423),
SaleData(name: "Flutter 制作指南 - 妙笔生花",value: 2956),
];
需要完成的作用如下：这儿右侧的图例暂时通过 Flutter 组件完成。遍历数据，通过 Wrap 组件竖向包裹 LegendItem 即可。
class LegendItem extends StatelessWidget {
final SaleData data;
final Color color;
const LegendItem({Key? key,required this.data,required this.color}) : super(key: key);
@override
Widget build(BuildContext context) {
return Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
CircleAvatar(
backgroundColor: color,
radius: 6,
),
const SizedBox(width: 6,),
Text(data.name,),
],
);
}
}
4. 饼图的点击事情
如下所示，点击扇形区域时，对应的扇形会 沿角平分线 移动，达到 弹出 的作用。
有了上一篇 SectorShape 中完成的 contains 办法校验点是否在矩形区域内，点击激活的作用就很简单完成。如下所示，在生成 SectorShape 时，校验触点是否在区域内，如果在，只要沿角平分线将 center 值平移即可：
List<SectorShape> mapShapeByData(List<double> data, Size size) {
_activeIndex = -1;
//略同...
double rad = shape.startAngle + data[i] * 2 * pi / 2;
if (shape.contains(p)) {
_activeIndex = i;
shape.center = shape.center.translate(5 * cos(rad), 5 * sin(rad));
}
//略同...
}
return shapes;
}
点击时，也能够让对应扇形区域的大圆半径增加，达到 凸出 的作用，如下图所示：
int _activeIndex = -1;
List<SectorShape> mapShapeByData(List<double> data, Size size) {
_activeIndex = -1;
//略同...
double rad = shape.startAngle + data[i] * 2 * pi / 2;
if (shape.contains(p)) {
_activeIndex = i;
shape.outRadius += 5;
}
//略同...
}
return shapes;
}
这儿用 _activeIndex 记录了激活索引，依据索引在制作时能够依据途径来制作阴影：
if (i == _activeIndex) {
canvas.drawShadow(path, Colors.grey, 2, false);
}
到这儿，饼图 的基本制作和点击事情就完成了。但这只是最根底的东西，另外还有很多细节需要考虑，比方动画、图例的事情、结构的封装等，想要做好一个通用的图表库，还有很长的路要走。现在把根底的逻辑打通，也有利于之后的整合。下一篇，将看一下 饼图 中动画的完成，那本文就到这儿，谢谢观看 ~
更多 Flutter 制作技巧，欢迎重视《Flutter 制作探究》专栏。
@张风捷特烈 2022.10.28 未允禁转我的 公众号: 编程之王-
我的 github 主页: toly1994328
