syncfusion_flutter_charts 没有提供我所有的数据
syncfusion_flutter_charts not provide all my data
我正在尝试使用此图表包并从 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;
}
这是我的输出,它只给我第一个文件的信息,如果有人能给我解决方案的话
我也是 Syncfusion_charts 的用户。
错误主要来自您的 xValue,因为它们实际上是 String
,并且在您的图表中,您将它们归类为 CategoryAxis
。
所以因为它们是相同的String
,所以它只产生一个值。
一个解决方案可能是:
更新您的 Firebase 后端,以便它可以在您的文档中使用 DateTime
而不是 String
。
更新您的 xValue,使其成为 DateTime
.
class ChartData {
ChartData(this.xValue, this.yValue);
DateTime xValue;
double yValue;
}
然后,在您的图表中使用 DateTimeAxis or a DateTimeCategoryAxis 作为您的 primaryXAxis
。
我想你需要这样的东西:
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;
}
我正在尝试使用此图表包并从 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;
}
这是我的输出,它只给我第一个文件的信息,如果有人能给我解决方案的话
我也是 Syncfusion_charts 的用户。
错误主要来自您的 xValue,因为它们实际上是 String
,并且在您的图表中,您将它们归类为 CategoryAxis
。
所以因为它们是相同的String
,所以它只产生一个值。
一个解决方案可能是:
更新您的 Firebase 后端,以便它可以在您的文档中使用 DateTime
而不是 String
。
更新您的 xValue,使其成为 DateTime
.
class ChartData {
ChartData(this.xValue, this.yValue);
DateTime xValue;
double yValue;
}
然后,在您的图表中使用 DateTimeAxis or a DateTimeCategoryAxis 作为您的 primaryXAxis
。
我想你需要这样的东西:
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;
}