0

我正在尝试使用此图表包并从 firebase 检索数据，数据由用户添加，例如，如果 Alex 添加 300，然后添加 400，我将添加到 firebase 拖曳不同的文档，一个用于 300，一个用于 400，就像这张照片中一样一个用户的所有这些文件 在此处输入图像描述

因此，我想从每个用户的所有文档中检索所有值和日期，并提供带有这些信息说明的图表：我的应用程序正在将老年用户与他的观察者联系起来，老年用户将从他的家和图表中添加他的葡萄糖值将显示在观察者主页这是我的代码，它运行正确，但我的图表中只有一列我试图打印列表长度，它给我 4，等于文档的数量

  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: (context, snapshot) {
          if (snapshot.data == null) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          final doc = snapshot.data.docs;
          return ListView.builder(
              itemCount: 1,
              itemBuilder: (ctx, index) {
                List<ChartData> chartData = <ChartData>[];
                for (int i = 1; i <= doc.length; i++) {
                  chartData.add(
                      ChartData(doc[index]['date'], doc[index]['glucose']));
                }
                print(chartData.length);
                return Container(
                  child: Column(
                    children: [
                      Text(
                        "رسم بياني لمستويات الضغط خلال اسبوع",
                        style: textStyle2,
                      ),
                      Directionality(
                        textDirection: TextDirection.ltr,
                        child: SfCartesianChart(
                            plotAreaBorderWidth: 0,
                            margin: EdgeInsets.all(10),
                            primaryXAxis: CategoryAxis(
                              maximumLabelWidth: 80,
                            ),
                            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,
                              )
                            ]),
                      ),
                    ],
                  ),
                );
              });
        }));

} }

class ChartData {
  ChartData(this.xValue, this.yValue);
  String xValue;
  double yValue;
}

这是我的输出，如果有人能给我解决方案，请只给我第一个文件的信息

在此处输入图像描述

4

2 回答 2

1

我也是这里的 Syncfusion_charts 的用户。

该错误主要是由您的 xValue 引起的，因为它们实际上是String在您的图表中，您将它们归类为CategoryAxis. 因此，由于它们相同String，因此它只产生一个值。

一种解决方案可能是：

更新您的 Firebase 后端，以便它可以使用DateTime而不是String在您的文档中。要更新您的 xValue，使其可以是DateTime.

class ChartData {
  ChartData(this.xValue, this.yValue);
  DateTime xValue;
  double yValue;
}

然后，在图表中使用DateTimeAxis或DateTimeCategoryAxis。primaryXAxis

于 2021-04-04T10:35:00.127 回答
1

我认为你需要这样的东西：

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;
}
于 2021-04-04T19:04:11.297 回答