Flutter 颤振：如何清除图表数据？
我正在尝试在flutter中构建一个应用程序，其中的图表每30秒更新一次来自网站的最新数据。开始时，图表显示正确，但当新数据添加到图表中而不替换前一个数据时，随着时间的推移，显示的行越来越多。我试过很多方法，但总是得到同样的结果。在代码中，我使用fl_动画线图，但我得到了与图表_颤振相同的结果。 你能帮帮我吗 main.dart中的代码Flutter 颤振：如何清除图表数据？,flutter,charts,flutter-dependencies,flutter-widget,Flutter,Charts,Flutter Dependencies,Flutter Widget,我正在尝试在flutter中构建一个应用程序，其中的图表每30秒更新一次来自网站的最新数据。开始时，图表显示正确，但当新数据添加到图表中而不替换前一个数据时，随着时间的推移，显示的行越来越多。我试过很多方法，但总是得到同样的结果。在代码中，我使用fl_动画线图，但我得到了与图表_颤振相同的结果。 你能帮帮我吗 main.dart中的代码 import 'package:flutter/material.dart'; import 'package:http/http.dart'; import
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);
}
}
导入“包装：颤振/材料.省道”；
导入“包：http/http.dart”；
导入“dart:convert”；
导入“dart:async”；
导入“chart.dart”；
导入“包：fl_动画线图/fl_动画线图.dart”；
最终地图数据集={}；
最终映射dataRec={}；
void main（）=>runApp（MaterialApp(
home:home（），
));
类Home扩展了StatefulWidget{
@凌驾
_HomeState createState（）=>\u HomeState（）；
}
类(HomeState扩展状态){
ChartWidget ChartWidget；
双设定温度=18.0；
双记录温度=15.0；
字符串get_url='url'；
字符串post_url='url'；
@凌驾
void initState（）{
super.initState（）；
fetchData（）；
定时器。周期（新的持续时间（秒：30），（时间）异步{
fetchData（）；
});
}
void fetchData（）异步{
响应=等待获取（获取url）；
列表数据=jsonDecode（response.body）；
打印（响应.正文）；
设置状态（）{
set_temp=double.parse（数据[9]['setTemperature']）；
rec_temp=double.parse（数据[9]['recTemperature']）；
对于（int i=0；i<10；i++）{
dataSet[DateTime.parse（数据[i]['date']）]=double.parse（数据[i]['setTemperature']）；
dataRec[DateTime.parse（数据[i]['date']）]=double.parse（数据[i]['recTemperature']）；
}
});
}
void sendData（）异步{
Response Response=wait post（post_url，body:{'tempSet'：set_temp.toString（）}）；
打印（'Response status:${Response.statusCode}'）；
打印（'Response body:${Response.body}'）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：正文(
“TERMOSMART”
),
背景颜色：Colors.amber，
标题：对，
),
正文：安全区(
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
大小盒子(
身高：40.0，
),
填充物(
填充：常数边集全部（32.0），
孩子：大小盒子(
高度：200.0，
孩子：小部件，
),
),
],
)
)
);
}
}
类ChartWidget扩展了StatefulWidget{
@凌驾
_ChartWidgetState createState（）；
}
类_ChartWidgetState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回图表（数据集：数据集，数据记录：数据记录）；
}
}
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
)
);
}
}
导入“包装：颤振/材料.省道”；
导入“包：fl_动画线图/fl_动画线图.dart”；
类图表扩展StatefulWidget{
Map dataRec={}；
地图数据集={}；
图表（{this.dataRec，this.dataSet}）；
@凌驾
_ChartState createState（）；
}
类_ChartState扩展了状态{
@凌驾
小部件构建（构建上下文）{
线形图；
chart=LineChart.fromDateTimeMaps(
[widget.dataRec，widget.dataSet]，
[颜色。绿色，颜色。蓝色]，
['C'，'C']）；
返回容器(
孩子：填充(
填充：常数边集全部（8.0），
子对象：动画线条图(
图表，
键：UniqueKey（），
)，//强制动画的唯一键
)
);
}
}
我使用随机数来模拟这种情况
您可以使用
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();
}
});
setState（（）{
dataSet.clear（）；
dataRec.clear（）；
对于（int i=0；i<10；i++）{
var now=DateTime.now（）；
印刷品（一）；
随机=新随机（）；
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
));
}
}
导入“包装：颤振/材料.省道”；
导入“包：http/http.dart”；
导入“dart:convert”；
导入“dart:async”；
导入“包：fl_动画线图/fl_动画线图.dart”；
导入“dart:math”；
最终地图数据集={}；
最终映射dataRec={}；
void main（）=>runApp（MaterialApp(
home:home（），
));
类Home扩展了StatefulWidget{
@凌驾
_HomeState createState（）=>\u HomeState（）；
}
类(HomeState扩展状态){
ChartWidget ChartWidget；
双设定温度=18.0；
双记录温度=15.0；
字符串get_url='url'；
字符串post_url='url'；
@凌驾
void initState（）{
super.initState（）；
/*WidgetsBinding.instance.addPostFrameCallback（（）{
fetchData（）；
});*/
fetchData（）；
定时器。周期（新的持续时间（秒：3），（时间）异步{
fetchData（）；
});
}
void fetchData（）异步{
/*响应=等待获取（获取url）；
列表数据=jsonDecode（response.body）；
打印（响应.正文）*/
设置状态（）{
/*set_temp=double.parse（数据[9]['setTemperature']）；
rec_temp=double.parse（数据[9]['recTemperature']）*/
dataSet.clear（）；
dataRec.clear（）；
对于（int i=0；i<10；i++）{
var now=DateTime.now（）；
印刷品（一）；
随机=新随机（）；
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（）；