Flutter：如何清除图表数据？

Question

我正在尝试构建一个带有图表的应用程序，该图表每30秒使用网站的最新数据进行更新。图表一开始会正确显示，但是在将新数据添加到图表而不替换先前的图表时，随着时间的推移，显示的线越来越多。我已经尝试了很多方法，但是我总是得到相同的结果。在代码中，我使用的是fl_animated_linechart，但Charts_flutter的结果相同。您能帮我吗？

main.dart中的代码

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'dart:convert';
import 'dart:async';
import 'chart.dart';
import 'package:fl_animated_linechart/fl_animated_linechart.dart';

final Map<DateTime, double> dataSet = {};
final Map<DateTime, double> dataRec = {};

void main() => runApp(MaterialApp(
  home: Home(),
));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  ChartWidget chartWidget;

  double set_temp = 18.0;
  double rec_temp = 15.0;

  String get_url = 'url';
  String post_url = 'url';

  @override
  void initState() {
    super.initState();
    fetchData();
    Timer.periodic(new Duration(seconds: 30), (time) async {
      fetchData();
    });
  }

  void fetchData() async{

    Response response = await get(get_url);
    List data = jsonDecode(response.body);
    print(response.body);
    setState(() {
      set_temp = double.parse(data[9]['setTemperature']);
      rec_temp = double.parse(data[9]['recTemperature']);
      for(int i=0; i < 10; i++){
        dataSet[DateTime.parse(data[i]['date'])] = double.parse(data[i]['setTemperature']);
        dataRec[DateTime.parse(data[i]['date'])] = double.parse(data[i]['recTemperature']);
      }

    });

  }

  void sendData() async{
    Response response = await post(post_url, body: {'tempSet': set_temp.toString()});
    print('Response status: ${response.statusCode}');
    print('Response body: ${response.body}');
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'TERMOSMART'
        ),
        backgroundColor: Colors.amber,
        centerTitle: true,
      ),
      body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              SizedBox(
                height: 40.0,
              ),
              Padding(
                padding: const EdgeInsets.all(32.0),
                child: SizedBox(
                  height: 200.0,
                  child: chartWidget,
                ),
              ),
            ],
          )
      )
    );
  }
}

class ChartWidget extends StatefulWidget {
  @override
  _ChartWidgetState createState() => _ChartWidgetState();
}

class _ChartWidgetState extends State<ChartWidget> {
  @override
  Widget build(BuildContext context) {
    return Chart(dataSet: dataSet, dataRec: dataRec);
  }
}

chart.dart中的代码

import 'package:flutter/material.dart';
import 'package:fl_animated_linechart/fl_animated_linechart.dart';


class Chart extends StatefulWidget {

  Map<DateTime, double> dataRec = {};
  Map<DateTime, double> dataSet = {};

  Chart({this.dataRec, this.dataSet});

  @override
  _ChartState createState() => _ChartState();

}

class _ChartState extends State<Chart> {
  @override
  Widget build(BuildContext context) {
    LineChart chart;
    chart = LineChart.fromDateTimeMaps(
        [widget.dataRec, widget.dataSet],
        [Colors.green, Colors.blue],
        ['C', 'C']);

    return  Container(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: AnimatedLineChart(
            chart,
            key: UniqueKey(),
          ), //Unique key to force animations
        )
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码我用随机数来模拟这种情况您可以使用dataSet.clear();和dataRec.clear();删除旧数据；

setState(() {         
      dataSet.clear();
      dataRec.clear();
      for (int i = 0; i < 10; i++) {
        var now = DateTime.now();
        print(i);
        Random random = new Random();
        int randomNumber1 = random.nextInt(100);
        int randomNumber2 = random.nextInt(100);
        dataSet[now.add(Duration(days: i))] = randomNumber1.toDouble();
        dataRec[now.add(Duration(days: i))] = randomNumber2.toDouble();
      }
    });

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'dart:convert';
import 'dart:async';
import 'package:fl_animated_linechart/fl_animated_linechart.dart';
import 'dart:math';

final Map<DateTime, double> dataSet = {};
final Map<DateTime, double> dataRec = {};

void main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  ChartWidget chartWidget;

  double set_temp = 18.0;
  double rec_temp = 15.0;

  String get_url = 'url';
  String post_url = 'url';

  @override
  void initState() {
    super.initState();
   /* WidgetsBinding.instance.addPostFrameCallback((_){
      fetchData();
    });*/
    fetchData();

    Timer.periodic(new Duration(seconds: 3), (time) async {
      fetchData();
    });
  }

  void fetchData() async {
    /*Response response = await get(get_url);
    List data = jsonDecode(response.body);
    print(response.body);*/
    setState(() {
      /*set_temp = double.parse(data[9]['setTemperature']);
      rec_temp = double.parse(data[9]['recTemperature']);*/
      dataSet.clear();
      dataRec.clear();
      for (int i = 0; i < 10; i++) {
        var now = DateTime.now();
        print(i);
        Random random = new Random();
        int randomNumber1 = random.nextInt(100);
        int randomNumber2 = random.nextInt(100);
        dataSet[now.add(Duration(days: i))] = randomNumber1.toDouble();
        dataRec[now.add(Duration(days: i))] = randomNumber2.toDouble();
      }
    });
  }

  /*void sendData() async {
    Response response =
        await post(post_url, body: {'tempSet': set_temp.toString()});
    print('Response status: ${response.statusCode}');
    print('Response body: ${response.body}');
  }
*/
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TERMOSMART'),
          backgroundColor: Colors.amber,
          centerTitle: true,
        ),
        body: SafeArea(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            SizedBox(
              height: 40.0,
            ),
            Padding(
              padding: const EdgeInsets.all(32.0),
              child: SizedBox(
                height: 200.0,
                child: ChartWidget(),
              ),
            ),
          ],
        )));
  }
}

class ChartWidget extends StatefulWidget {
  @override
  _ChartWidgetState createState() => _ChartWidgetState();
}

class _ChartWidgetState extends State<ChartWidget> {
  @override
  Widget build(BuildContext context) {
    return Chart(dataSet: dataSet, dataRec: dataRec);
  }
}

class Chart extends StatefulWidget {
  Map<DateTime, double> dataRec = {};
  Map<DateTime, double> dataSet = {};

  Chart({this.dataRec, this.dataSet});

  @override
  _ChartState createState() => _ChartState();
}

class _ChartState extends State<Chart> {


  @override
  Widget build(BuildContext context) {
    LineChart chart;
    chart = LineChart.fromDateTimeMaps([dataRec, dataSet],
        [Colors.green, Colors.blue], ['C', 'C']);

    return Container(
        child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: AnimatedLineChart(
        chart,
        key: UniqueKey(),
      ), //Unique key to force animations
    ));
  }
}