有一个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;
}
任何帮助都是受欢迎的,也想知道如果图表实际上会这样工作。谢谢。
1条答案
按热度按时间rjzwgtxy1#
我们已经有了一个知识库,用于从Firestore数据库获取数据并将其Map到CartesianChart系列。我们在下面共享了与Firestore相关的知识库链接,供您参考。
KB,
https://www.syncfusion.com/kb/13022/how-to-render-the-flutter-chart-using-the-data-in-firestore-sfcartesianchart