Flutter:如何清除图表数据?
Flutter: How to clear chart data?
我正在尝试构建一个 flutter 应用程序,其中包含一个图表,该图表每 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
)
);
}
}
您可以复制粘贴 运行 下面的完整代码
我用随机数来模拟这种情况
您可以使用 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
));
}
}
我正在尝试构建一个 flutter 应用程序,其中包含一个图表,该图表每 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
)
);
}
}
您可以复制粘贴 运行 下面的完整代码
我用随机数来模拟这种情况
您可以使用 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
));
}
}