下面是一个
使用fl_
chart
库创建饼图的简单示例：
```dart
import 'package:
flutter/material.dart';
import 'package:
fl_
chart/
fl_
chart.dart';
class Pie
ChartSample extends StatefulWidget {
@override
_Pie
ChartSampleState createState() => _Pie
ChartSampleState();
}
class _Pie
ChartSampleState extends State<Pie
ChartSample> {
int touchedIndex;
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: Pie
Chart(
Pie
ChartData(
pieTouchData: PieTouchData(touchCallback: (pieTouchResponse) {
setState(() {
if (pieTouchResponse.touchInput is
FlLongPressEnd ||
pieTouchResponse.touchInput is
FlPanEnd) {
touchedIndex = -1;
} else {
touchedIndex = pieTouchResponse.touchedSectionIndex;
}
});
}),
borderData:
FlBorderData(show: false),
sectionsSpace: 0,
centerSpaceRadius: 40,
sections: getSections(),
),
),
);
}
List<Pie
ChartSectionData> getSections() {
return List.generate(4, (i) {
final isTouched = i == touchedIndex;
final double fontSize = isTouched ? 25 : 16;
final double radius = isTouched ? 60 : 50;
switch (i) {
case 0:
return Pie
ChartSectionData(
color: Colors.red,
value: 40,
title: '40%',
radius: radius,
titleStyle: TextStyle(
fontSize: fontSize,
fontWeight: FontWeight.bold,
color: const Color(0xffffffff),
),
);
case 1:
return Pie
ChartSectionData(
color: Colors.green,
value: 30,
title: '30%',
radius: radius,
titleStyle: TextStyle(
fontSize: fontSize,
fontWeight: FontWeight.bold,
color: const Color(0xffffffff),
),
);
case 2:
return Pie
ChartSectionData(
color: Colors.blue,
value: 15,
title: '15%',
radius: radius,
titleStyle: TextStyle(
fontSize: fontSize,
fontWeight: FontWeight.bold,
color: const Color(0xffffffff),
),
);
case 3:
return Pie
ChartSectionData(
color: Colors.yellow,
value: 15,
title: '15%',
radius: radius,
titleStyle: TextStyle(
fontSize: fontSize,
fontWeight: FontWeight.bold,
color: const Color(0xffffffff),
),
);
default:
return null;
}
});
}
}
```
在这个例子中，我们创建了一个Pie
ChartSample类，它继承自StatefulWidget。在build()方法中，我们创建了一个AspectRatio小部件，它将Pie
Chart小部件的宽高比设置为1:1。然后，我们创建了一个Pie
Chart小部件，它接收一个Pie
ChartData对象作为参数。Pie
ChartData对象包含所有的饼图数据，包括饼图的颜色、半径、标题、值等。
在Pie
ChartData对象中，我们
使用了PieTouchData对象来处理用户的触摸事件。我们还
使用了
FlBorderData对象来隐藏边框，
使用sectionsSpace属性来设置饼图部分之间的间距，
使用centerSpaceRadius属性来设置中心空间的半径。
在getSections()函数中，我们生成了饼图的各个部分。每个部分都由一个Pie
ChartSectionData对象表示，它包括颜色、半径、值、标题和标题样式等属性。我们返回一个包含所有部分的列表，然后将它们传递给Pie
ChartData对象。
最后，我们在PieTouchData对象的touchCallback属性中处理触摸事件。如果用户停止触摸饼图，我们将touchedIndex设置为-1，否则，我们将touchedIndex设置为当前触摸部分的索引。根据touchedIndex的值，我们可以设置饼图部分的半径和标题样式，以突出显示当前触摸的部分。
最低0.47元/天 解锁文章
1642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
