在flutter的charts_flutter库中,要在饼图上添加图例,可以通过使用charts.PieChart
的behaviors
属性来实现。behaviors
属性允许我们添加各种交互行为和装饰元素,包括图例。
以下是一个示例代码,演示如何在饼图上添加图例:
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
class PieChartWithLegend extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
PieChartWithLegend(this.seriesList, {this.animate});
@override
Widget build(BuildContext context) {
return charts.PieChart(
seriesList,
animate: animate,
behaviors: [
charts.DatumLegend(
position: charts.BehaviorPosition.end, // 图例位置
desiredMaxRows: 2, // 图例最大行数
horizontalFirst: false, // 图例是否水平排列
cellPadding: EdgeInsets.only(right: 4.0, bottom: 4.0), // 图例内边距
entryTextStyle: charts.TextStyleSpec(
color: charts.MaterialPalette.black, // 图例文字颜色
fontSize: 11, // 图例文字大小
),
),
],
);
}
}
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Pie Chart with Legend')),
body: Center(
child: PieChartWithLegend(
_createSampleData(),
animate: true,
),
),
),
));
}
List<charts.Series<LinearSales, String>> _createSampleData() {
final data = [
LinearSales('Category 1', 100),
LinearSales('Category 2', 200),
LinearSales('Category 3', 300),
LinearSales('Category 4', 400),
];
return [
charts.Series<LinearSales, String>(
id: 'Sales',
domainFn: (LinearSales sales, _) => sales.category,
measureFn: (LinearSales sales, _) => sales.sales,
data: data,
labelAccessorFn: (LinearSales sales, _) => '${sales.category}: ${sales.sales}',
)
];
}
class LinearSales {
final String category;
final int sales;
LinearSales(this.category, this.sales);
}
在上面的示例中,我们创建了一个PieChartWithLegend
小部件,它接受一个seriesList
参数和一个可选的animate
参数。seriesList
是一个包含饼图数据的charts.Series
列表。animate
参数用于指定是否应该对图表进行动画效果。
在PieChartWithLegend
小部件的build
方法中,我们创建了一个charts.PieChart
小部件,并将seriesList
和animate
传递给它。然后,我们使用behaviors
属性添加了一个charts.DatumLegend
图例。charts.DatumLegend
允许我们自定义图例的各种属性,例如位置、行数、文字样式等。
在main
函数中,我们创建了一个简单的Flutter应用程序,其中包含一个带有标题栏和一个居中的PieChartWithLegend
小部件。
最后,我们定义了一个_createSampleData
函数,它返回一个包含饼图数据的charts.Series
列表。在这个示例中,我们使用了一个简单的数据集,包含了四个类别和对应的销售额。
这样,当你运行这个示例应用程序时,你将在饼图上看到一个带有图例的饼图。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
请注意,以上推荐的腾讯云产品仅供参考,你可以根据实际需求选择适合的产品。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云