Question

please see my code

我正在尝试将来自 chart_flutter 的饼图放入 Expanded Widget 中，但出现错误 “不正确使用父小部件” 我试图用容器包装父列并给它一个固定的高度和宽度，删除列表视图小部件，用容器包装图表，但没有运气请在这方面需要帮助，请记住，我在此屏幕中有一个数据表，因此在表格占用所需空间后，我需要图表来处理其余部分。提前致谢。

Answer 1

这里有一个小例子，说明我使用 syncfusion_flutter_charts 和 FireStore 为您建议的内容：

Widget build(BuildContext context) {
    Future getElderlyId() async {
      await FirebaseFirestore.instance
          .collection('users')
          .doc(FirebaseAuth.instance.currentUser.uid)
          .get()
          .then((data) {
        setState(() {
          elderlyId = data.data()['elderlyId'];
        });
      });
    }

    return Scaffold(
        body: StreamBuilder(
            stream: FirebaseFirestore.instance
                .collection('glucose')
                .where('uid', isEqualTo: elderlyId)
                .snapshots(),
            builder:
                (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (snapshot.hasData) {
                // return Center(
                //   child: CircularProgressIndicator(),
                // );

                List<ChartData> chartData = [];
                for (int index = 0;
                    index < snapshot.data.docs.length;
                    index++) {
                  DocumentSnapshot documentSnapshot = snapshot.data.docs[index];
                  chartData.add(ChartData.fromMap(documentSnapshot.data()));
                }

                return Container(
                  child: Column(
                    children: [
                      Text(
                        "رسم بياني لمستويات السكر خلال اسبوع",
                        style: textStyle2,
                      ),
                      Directionality(
                        textDirection: TextDirection.ltr,
                        child: SfCartesianChart(
                            plotAreaBorderWidth: 0,
                            margin: EdgeInsets.all(10),
                            // primaryXAxis: CategoryAxis(
                            //   maximumLabelWidth: 80,
                            // ),
                            primaryXAxis: DateTimeAxis(
                                // Interval type will be months
                                intervalType: DateTimeIntervalType.days,
                                interval: 1),
                            primaryYAxis: CategoryAxis(
                              maximumLabelWidth: 80,
                            ),
                            enableAxisAnimation: true,
                            // borderColor: yellow,
                            series: <CartesianSeries<ChartData, dynamic>>[
                              ColumnSeries<ChartData, dynamic>(
                                color: yellow,
                                dataSource: chartData,
                                xAxisName: "days",
                                yAxisName: "values",
                                // color: yellow,
                                animationDuration: 20,
                                xValueMapper: (ChartData gelu, _) =>
                                    gelu.xValue,
                                yValueMapper: (ChartData gelu, _) =>
                                    gelu.yValue,
                              )
                            ]),
                      ),
                    ],
                  ),
                );
              } else {
                return CircularProgressIndicator();
              }
            }));
  }
}

class ChartData {
  ChartData(this.xValue, this.yValue);
  ChartData.fromMap(Map<String, dynamic> dataMap)
      : xValue = dataMap['date'],
        yValue = dataMap['glucose'];
  Timestamp xValue;
  double yValue;
}

带有扩展小部件的 Flutter 饼图

1 个答案: