syncfusion_flutter_charts не предоставляет все мои данные
Я пытаюсь использовать этот пакет диаграмм и извлекать данные из firebase, данные добавляются пользователем, например, если Алекс добавил 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;
}
вот мой результат, который дает мне только информацию о первом документе, пожалуйста, если кто-нибудь может дать мне решение
3 ответа
Думаю, вам нужно что-то вроде этого:
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;
}
Я также пользуюсь Syncfusion_charts здесь.
Ошибка в основном связана с вашим xValue, потому что они на самом деле и в вашей диаграмме вы классифицируете их как
CategoryAxis
. Так как они одинаковы, получается только одно значение.
Одно из решений могло быть таким:
Обновите серверную часть Firebase, чтобы она могла
String
в вашем документе. Чтобы обновить свой xValue, чтобы он мог быть
DateTime
.
class ChartData {
ChartData(this.xValue, this.yValue);
DateTime xValue;
double yValue;
}
Затем используйте DateTimeAxis или DateTimeCategoryAxis для вашего
primaryXAxis
в вашем графике.
Привет от Syncfusion. Мы проанализировали ваш сценарий и подготовили образец для справки, воспользуйтесь им. Здесь нам было дано одно и то же строковое значение для оси x, и столбец отображается правильно для данных значений. Мы подозреваем, что у вас есть только одни данные в вашем случае и, следовательно, только один столбец в выходных данных. В нашем прилагаемом образце столбец отображается правильно для заданных данных. Мы также приложили образец для использования с типом timestamp в firebase, и он преобразован в DateTime в нашей диаграмме. Мы надеемся, что приведенные образцы помогут вам, но все же у вас есть проблемы. Верните нам сценарий проблемы, воспроизведенный в прилагаемом образце, который поможет нам провести дальнейший анализ и быстрее предоставить вам решение.
Для получения дополнительной информации см. Справочный документ.
Спасибо, Дхаранитаран. п