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
    ));
  }
}