Flutter中数据为空时如何用灰色圆圈代替空白显示piechart

2izufjch  于 2022-11-30  发布在  Flutter
关注(0)|答案(1)|浏览(149)

我使用fl_chart包创建了一个chartWidget,
如果图表数据为空,则显示为空...但是
我希望它显示灰色圆圈与相同大小当图表的数据是空的...像我的附加图像
这是我图表小部件

class ChartWidget extends StatelessWidget {
  final Map<String, dynamic> mapdata;

  const ChartWidget({super.key, required this.mapdata});

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(20),
        child: PieChart(
            PieChartData(
                sectionsSpace: 4,
                centerSpaceRadius: 50,
                sections: mapdata.entries
                    .map((e) => PieChartSectionData(
                    title: e.key.toString(), value: (e.value)))
                    .toList()))
    );
  }

}

主屏幕

class HomeScreen extends StatelessWidget {
   HomeScreen({Key? key}) : super(key: key);

  Map<String,dynamic> expenseData={
    'Food':3000.0,
    'Medicine':4000.0,
    'Others':800.0
  };
  Map<String,dynamic> incomeData={};//here income data is empty

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
        Expanded(child: ChartWidget(mapdata: expenseData,)),
        Expanded(child: ChartWidget(mapdata: incomeData,)),
      ],),
    );
  }
}

jvlzgdj9

jvlzgdj91#

试试这个:

sections: mapdata.isEmpty
                  ? [PieChartSectionData(color: Colors.grey)]
                  : mapdata.entries
                      .map((e) => PieChartSectionData(
                          title: e.key.toString(), value: (e.value)))
                      .toList(),

相关问题