时间戳

首页 > 解决方案 > Flutter json和图表

android - Flutter json和图表

问题描述

我有这段代码，当我运行它时，我在图中看不到任何东西，我也看不到数据，问题出在哪里？

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<HeartRate> {
  List<charts.Series<Rate, String>> rates = [];

  List<Rate> lista = [];

  Future<List<Rate>> 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);
}

标签： androidflutterdartvisual-studio-codeavd

解决方案

将 Syncfusion 图表库用于 Json 数据。这是官方网站的链接 https://www.syncfusion.com/kb/11674/how-to-render-a-flutter-chart-using-the-json-data-sfcartesianchart

推荐阅读