如何解决图表未在 Flutter 中呈现
我有一个 Flutter 项目,我使用 Syncfusion 将 JSON 数据呈现到图表中。调试代码时没有出现任何错误,但在构建完成时未呈现图表。我不确定代码中是否有错误,但它适用于其他图表。
此外,我认为对图表未呈现负责的一些原因可能是:
- 要绘制的数据太多。 (这可能不是问题,因为我也在减少数据后尝试过)
- 要绘制的值太小,因为它们的范围主要是从一些负值到一些正值,而且这些值是十进制的(例如 0.7、-0.6 等)。
这些只是我对可能出错的假设。如果我错了,请纠正我。
任何解决或至少帮助我理解错误的想法都会很棒。是的,请帮助我:))。以下是我拥有的代码。
import 'package:Flutter/material.dart';
import 'package:fyp/model/rainApiCall.dart';
import 'package:syncfusion_Flutter_charts/charts.dart';
class Past extends StatefulWidget{
@override
_Past createState() => _Past();
}
class _Past extends State<Past>{
List<String> t = [];
List<String> ampA = [];
List<String> ampB = [];
List<String> ampC = [];
@override
void initState() {
fetchEQData();
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: FutureBuilder(
future: fetchEQData(),builder: (context,snapshot){
if(snapshot.hasData) {
var stationID = '4853';
for(int i=0; i<snapshot.data.length; i++){
if(snapshot.data[i].stationId==stationID){
t.add(snapshot.data[i].recordLength);
ampA.add(snapshot.data[i].amplitudemaxa);
ampB.add(snapshot.data[i].amplitudemaxb);
ampC.add(snapshot.data[i].amplitudemaxc);
}
}
return Card(
child: SfCartesianChart(
series: <ChartSeries>[
StackedLineseries<EqAmpData,double>(
dataSource: getColumnData(t,ampA,ampB,ampC),dashArray: <double>[5,5],xValueMapper: (EqAmpData eqdata,_) => double.parse(eqdata.x),yValueMapper: (EqAmpData eqdata,_) => int.parse(eqdata.y1),),StackedLineseries<EqAmpData,_) => int.parse(eqdata.y2),_) => int.parse(eqdata.y3),]
)
);
}
return CircularProgressIndicator();
},);}}
class EqAmpData{
String x;
String y1;
String y2;
String y3;
EqAmpData(this.x,this.y1,this.y2,this.y3);
}
dynamic getColumnData(List xval,List yval1,List yval2,List yval3) {
List rtime = xval;
List y1 = yval1;
List y2 = yval2;
List y3 = yval3;
List<EqAmpData> columnData = <EqAmpData>[];
for (int i = 0; i < rtime.length; i++) {
columnData.add(EqAmpData(rtime[i],y1[i],y2[i],y3[i]));
}
return columnData;
}
构建后的屏幕: enter image description here
我拥有的数据截图: enter image description here
解决方法
当您定义 StackedLineSeries
时,您的 yValueMapper
应提供 double
而不是 int
:
StackedLineSeries<EqAmpData,double>(
dataSource: getColumnData(t,ampA,ampB,ampC),dashArray: <double>[5,5],xValueMapper: (EqAmpData eqdata,_) => double.parse(eqdata.x),yValueMapper: (EqAmpData eqdata,_) => double.parse(eqdata.y1),),
完整的源代码,便于复制粘贴
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,title: 'Charts Demo',home: Past(),);
}
class Past extends StatefulWidget {
@override
_Past createState() => _Past();
}
class _Past extends State<Past> {
List<String> t = [];
List<String> ampA = [];
List<String> ampB = [];
List<String> ampC = [];
@override
void initState() {
fetchEQData();
super.initState();
}
Future<List<RawData>> fetchEQData() async {
await Future.delayed(Duration(seconds: 2));
return data;
}
StackedLineSeries<EqAmpData,double> prepareSerie({
List<EqAmpData> dataSource,num Function(EqAmpData,int) yValueMapper,}) {
return StackedLineSeries<EqAmpData,double>(
dataSource: dataSource,yValueMapper: yValueMapper,);
}
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: FutureBuilder<List<RawData>>(
future: fetchEQData(),builder: (context,snapshot) {
if (snapshot.hasData) {
snapshot.data
.where((item) => item.stationId == '4853')
.forEach((item) {
t.add(item.recordLength);
ampA.add(item.amplitudemaxa);
ampB.add(item.amplitudemaxb);
ampC.add(item.amplitudemaxc);
});
final dataSource = getColumnData(t,ampC);
return Card(
child: SfCartesianChart(
series: <ChartSeries>[
prepareSerie(
dataSource: dataSource,yValueMapper: (eqdata,prepareSerie(
dataSource: dataSource,_) => double.parse(eqdata.y2),_) => double.parse(eqdata.y3),],);
}
return CircularProgressIndicator();
},);
}
}
// DOMAIN
class EqAmpData {
final String x;
final String y1;
final String y2;
final String y3;
EqAmpData(this.x,this.y1,this.y2,this.y3);
}
dynamic getColumnData(List rtime,List y1,List y2,List y3) {
return List.generate(
rtime.length,(i) => EqAmpData(rtime[i],y1[i],y2[i],y3[i]),);
}
class RawData {
final String stationId;
final String recordLength;
final String amplitudemaxa;
final String amplitudemaxb;
final String amplitudemaxc;
RawData(
this.stationId,this.recordLength,this.amplitudemaxa,this.amplitudemaxb,this.amplitudemaxc,);
}
// DATA
final random = math.Random();
final data = List.generate(
100,(index) => RawData(
"4853",(index * 0.01).toString(),((random.nextInt(100) - 50) / 500).toString(),((random.nextInt(100) - 50) / 1000).toString(),);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。