我试图在时间序列图中显示一些数据,我找到了一个示例“ https://google.github.io/charts/flutter/example/time_series_charts/simple.html ”,但该数据并非来自互联网。问题在于如何将JSON数据应用于时间序列数据。时间序列数据的代码如下:
final data = [ // How to apply the JSON data in TimeSeriesSales ? new TimeSeriesSales(new DateTime(2017, 9, 19), 5), new TimeSeriesSales(new DateTime(2017, 9, 26), 25), new TimeSeriesSales(new DateTime(2017, 10, 3), 100), new TimeSeriesSales(new DateTime(2017, 10, 10), 75), ];
有完整的简单代码可供参考。请随意发表评论。谢谢。
import 'dart:async'; import 'dart:convert'; import 'package:http/http.dart' as http; import 'package:charts_flutter/flutter.dart' as charts; import 'package:flutter/material.dart'; /// Sample time series data type. class TimeSeriesSales { final DateTime time; final int sales; TimeSeriesSales(this.time, this.sales); } class ItemDetailsPage extends StatefulWidget { @override _ItemDetailsPageState createState() => new _ItemDetailsPageState(); } class _ItemDetailsPageState extends State<ItemDetailsPage> { String url = "https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=1&aggregate=1&allData=true"; List dataJSON; Future<String> getCoinsTimeSeries() async { var response = await http .get(Uri.encodeFull(url), headers: {"Accept": "application/json"}); setState(() { var extractdata = json.decode(response.body); dataJSON = extractdata["Data"]; }); } @override void initState() { this.getCoinsTimeSeries(); } @override Widget build(BuildContext context) { final data = [ // How to apply the JSON data in TimeSeriesSales ? new TimeSeriesSales(new DateTime(2017, 9, 19), 5), new TimeSeriesSales(new DateTime(2017, 9, 26), 25), new TimeSeriesSales(new DateTime(2017, 10, 3), 100), new TimeSeriesSales(new DateTime(2017, 10, 10), 75), ]; var series = [ new charts.Series<TimeSeriesSales, DateTime>( id: 'Sales', colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, domainFn: (TimeSeriesSales sales, _) => sales.time, measureFn: (TimeSeriesSales sales, _) => sales.sales, data: data, ) ]; var chart = new charts.TimeSeriesChart( series, animate: true, ); var chartWidget = new Padding( padding: new EdgeInsets.all(32.0), child: new SizedBox( height: 200.0, child: chart, ), ); return Scaffold( appBar: new AppBar(title: new Text("Details")), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), chartWidget, ], ), ), ); } }
首先要做的是重构TimeSeriesSales,使其在您的应用程序中有意义,例如:
TimeSeriesSales
class TimeSeriesPrice { final DateTime time; final double price; TimeSeriesSales(this.time, this.price); }
接下来,您需要构建data。
data
List<TimeSeriesPrice> data = []; // populate data with a list of dates and prices from the json for (Map m in dataJSON) { data.add(TimeSeriesPrice(m['date'], m['price']); } var series = ...
您没有给出json格式的示例,所以这是一个猜测。(您可能必须将json字符串date解析为Dart DateTime。)