Flutter json和图表

Question

I have this code when i run it i cannot see anything in graph i cannot see the data too where is the problem?

import 'package:flutter/material.dart'; import 'dart:convert'; import 'package:charts_flutter/flutter.dart' as charts;

class HeartRate extends StatefulWidget { @override _HeartRate createState() => _HeartRate(); }

class _HeartRate extends State { List<charts.Series<Rate, String>> rates = [];

List lista = [];

Future<List> loadRate() async { String jString = await DefaultAssetBundle.of(context).loadString('assets/heartrate.json'); final jResponse = json.decode(jString); var idJson = jResponse['activities-heart'];

 setState(() { for (Map i in idJson) { lista.add(Rate(i['dateTime'], i['heartrate'])); } }); return lista; }

List<charts.Series<Rate, String>> _finalData() { final data = lista;

 return [ new charts.Series<Rate, String>( id: 'Heart Rate', domainFn: (Rate rate, _) => rate.date, measureFn:(Rate rate, _) => rate.hr, data: data, ), ]; }

@override void initState() { super.initState(); loadRate(); rates = _finalData(); }

bar() { return new charts.BarChart( rates, primaryMeasureAxis: new charts.NumericAxisSpec(renderSpec: new charts.NoneRenderSpec()), domainAxis: new charts.OrdinalAxisSpec( showAxisLine: true, renderSpec: new charts.NoneRenderSpec()), layoutConfig: new charts.LayoutConfig( leftMarginSpec: new charts.MarginSpec.fixedPixel(0), topMarginSpec: new charts.MarginSpec.fixedPixel(0), rightMarginSpec: new charts.MarginSpec.fixedPixel(0), bottomMarginSpec: new charts.MarginSpec.fixedPixel(0)), ); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Heart Rate"), ), body: bar(), ); } }

//class to get details class Rate { final String date; int hr;

Rate(this.date, this.hr); }

Answer 1

Use Syncfusion Chart library for Json Data. Here is the link to Official Website https://www.syncfusion.com/kb/11674/how-to-render-a-flutter-chart-using-the-json-data-sfcartesianchart