图表未在 Flutter 中呈现

问题描述

我有一个 Flutter 项目，我使用 Syncfusion 将 JSON 数据呈现到图表中。调试代码时没有出现任何错误，但在构建完成时未呈现图表。我不确定代码中是否有错误，但它适用于其他图表。

此外，我认为对图表未呈现负责的一些原因可能是：

1. 要绘制的数据太多。 （这可能不是问题，因为我也在减少数据后尝试过）
2. 要绘制的值太小，因为它们的范围主要是从一些负值到一些正值，而且这些值是十进制的（例如 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(),);