flutter 将FirestoreListView查询数据传递给SfCartesianChart

siv3szwd  于 2022-12-14  发布在  Flutter
关注(0)|答案(1)|浏览(126)

有一个FirestoreListView可以查询数据并显示列表,还有一个位于FirestoreListView主体下的浮动按钮中的SfCartesianChart,不能传递数据,当我已经有了我想要的格式的数据时,我不会再做另一个查询。

Widget build(BuildContext context) {
return Scaffold(
  appBar: MyAppBar(title: 'Estadisticas de uso'),
  bottomNavigationBar: const MyNavBar(screen: routeName),
  body: FirestoreListView(
    pageSize: 20,
    query: FirebaseFirestore.instance
        .collection('uso')
        //.where('usoEdtEstAsigId', isEqualTo: user!.uid)
        .orderBy('usoOn', descending: true),
    loadingBuilder: (_) => Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            CircularProgressIndicator(),
          ],
        ),
      ],
    ),
    itemBuilder: ((context, snapshot) {
      Map<String, dynamic> data = snapshot.data();
      Timestamp tOn = data['usoOn'] as Timestamp;
      DateTime dateOn = tOn.toDate();
      Timestamp tOff = data['usoOff'] as Timestamp;
      DateTime dateOff = tOff.toDate();

      //Place 1, check in the end for info
      /*dynamic getColumnData(){
        List<StaticData> columnData = <StaticData>[
        StaticData(dateOn, data['usoMinutos'])
       ];
       return columnData;
      }*/
      return SingleChildScrollView(
   }),
 ),

身体外的浮动按钮:FireStoreListView,因此它可以在滚动页面时保持不变。

floatingActionButton: FloatingActionButton.extended(
    onPressed: () {
      showModalBottomSheet<void>(
          context: context,
          builder: ((BuildContext context) {
            return Container(
              height: 400,
              margin: const EdgeInsets.only(top: 5, left: 10, right: 10),
              child: Center(
                child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          SfCartesianChart(
                              primaryXAxis: DateTimeAxis(
                                  title: AxisTitle(text: 'Fecha y hora')),
                              primaryYAxis: NumericAxis(
                                  title: AxisTitle(text: 'Minutos')),
                              title: ChartTitle(
                                  text:
                                      'Grafico de Minutos de Uso / Tiempo de Encendido',
                                  textStyle: TextStyle(
                                      fontSize: 12,
                                      fontWeight: FontWeight.bold)),
                              //legend: Legend(isVisible: true),
                              tooltipBehavior:
                                  TooltipBehavior(enable: true),
                              series: <ChartSeries>[
                                ColumnSeries<StaticData, DateTime>(
                                    dataSource: getColumnData(),
                                    xValueMapper: (StaticData static, _) =>
                                        static.x,
                                    yValueMapper: (StaticData static, _) =>
                                        static.y,
                                    dataLabelSettings: DataLabelSettings(
                                      isVisible: true,
                                    ))
                              ]),
                        ],
                      ),

同时设置图形

class StaticData {
   DateTime x;
   double y;
StaticData(this.x, this.y);
}

但这就是问题所在,这就是我如何使用数据并为列设置它,如果我在外部添加它,我无法访问数据,但方法被调用,但我还需要来自查询的数据和来自Timestamp的日期转换。如果我在转换下的itemBuilder中添加它,我无法从Graph访问方法,因为它在主体下。
地点二:主课堂外

dynamic getColumnData(){
  List<StaticData> columnData = <StaticData>[
      StaticData(dateOn, data['usoMinutos'])
    ];
    return columnData;
}

任何帮助都是受欢迎的,也想知道如果图表实际上会这样工作。谢谢。

rjzwgtxy

rjzwgtxy1#

我们已经有了一个知识库,用于从Firestore数据库获取数据并将其Map到CartesianChart系列。我们在下面共享了与Firestore相关的知识库链接,供您参考。
KB,
https://www.syncfusion.com/kb/13022/how-to-render-the-flutter-chart-using-the-data-in-firestore-sfcartesianchart

相关问题