flutter - 如何实现chart_flutter时间序列中的数据?
问题描述
我正在尝试在 chart_flutter 时间序列中实现 api 数据。但是我在实施时遇到了问题。这是我的代码如下所示:
class TankChart extends StatefulWidget {
TankChart({Key key}) : super(key: key);
@override
_TankChartState createState() => _TankChartState();
}
class _TankChartState extends State<TankChart> {
var ping;
List<charts.Series<TankPingProvider, dynamic>> series = [
charts.Series(
id: 'Tank Ping',
data: ping,
domainFn: (TankPingProvider pings, _) => pings.tankPing[number.toString()][index].trackedAt,
measureFn: (TankPingProvider pings, _) => pings.tankPing[number.toString()][index].volume
)
];
return charts.TimeSeriesChart(
series,
animate: true,
);
});
}
}
如您所见,我在这行代码中有错误:
data: ping,
和这里:
series,
错误是:
The argument type 'TankPingProvider' can't be assigned to the parameter type 'List<TankPingProvider>'.
无论如何要实现数据吗?
这是我的 api 的外观:
{
"1": [
{
"tracked_at": "2020-11-29T17:33:42.000000Z",
"fuel": 71.05,
"level": 2.4867087,
"volume": 41671.1
},
{
"tracked_at": "2020-11-30T01:41:41.000000Z",
"fuel": 70.04,
"level": 2.451534,
"volume": 41031.36
},
{
"tracked_at": "2020-11-30T01:44:05.000000Z",
"fuel": 68.47,
"level": 2.396358,
"volume": 40015.56
},
{
"tracked_at": "2020-11-30T01:46:47.000000Z",
"fuel": 66.89,
"level": 2.341182,
"volume": 38985.96
},
]
}
我使用模型而不是系列。这是我的模型的样子:
import 'dart:convert';
Map<String, List<TankPing>> tankPingFromJson(dynamic str) => Map.from(json.decode(str)).map((k, v) => MapEntry<String, List<TankPing>>(k, List<TankPing>.from(v.map((x) => TankPing.fromJson(x)))));
String tankPingToJson(Map<String, List<TankPing>> data) => json.encode(Map.from(data).map((k, v) => MapEntry<String, dynamic>(k, List<dynamic>.from(v.map((x) => x.toJson())))));
class TankPing {
TankPing({
this.trackedAt,
this.fuel,
this.level,
this.volume,
});
DateTime trackedAt;
double fuel;
double level;
double volume;
factory TankPing.fromJson(Map<String, dynamic> json) => TankPing(
trackedAt: DateTime.parse(json["tracked_at"]),
fuel: json["fuel"].toDouble(),
level: json["level"].toDouble(),
volume: json["volume"].toDouble(),
);
Map<String, dynamic> toJson() => {
"tracked_at": trackedAt.toString(),
"fuel": fuel,
"level": level,
"volume": volume,
};
}
任何帮助将不胜感激。
解决方案
问题的根源是当您在代码中放置地图时,图表的数据源需要一个列表。
要修复它,请将 api 结果中的所有项目转换为 List< TankPingProvider> ,它应该可以工作。
推荐阅读
- date - 确保移动用户没有向服务器发送虚假的日期、时间和时区
- c++ - 使用 MPI Scatter 分布数字 - 错误
- c# - Windows8/win10 c++/c# : 有多个虚拟桌面同时处于活动状态
- angular - 对象可能是 BehaviourSubject 的“未定义”
- css - CSS - 移动设备的奇怪“放大”背景图片
- arrays - 我可以在 ruby 中有一个正则表达式数组吗?
- android - SQLite getwritableDatabase 返回 null
- java - 此生产者消费者的非法监视器状态异常?
- javascript - 如何在 C# 应用程序中显示 HTML 画布?
- angular - 在 Angular 中,如何检查相对路由是否处于活动状态?