flutter 动画json_Flutter-JSON和时间序列图

I am trying to display some data in a time-series chart, I found an example "https://google.github.io/charts/flutter/example/time_series_charts/simple.html" but the data is not request from internet. The problem is that how to apply the JSON data into a time-series data. The code of a time-series data as the following:

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),

];

There is a completed simple code for reference. Please feel free to comment. Thank you.

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 {

String url =

"https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=1&aggregate=1&allData=true";

List dataJSON;

Future 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(

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: [

new Text(

'You have pushed the button this many times:',

),

chartWidget,

],

),

),

);

}

}

解决方案

The first thing to do is to refactor TimeSeriesSales so that it makes sense in your application, for example:

class TimeSeriesPrice {

final DateTime time;

final double price;

TimeSeriesSales(this.time, this.price);

}

Next, you need to build data.

List 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 = ...

You don't give an example of the json format, so this is a guess. (You are likely to have to parse the json string date into a Dart DateTime.)