图表未在 Flutter 中呈现

Question

我有一个 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, double>(
                  dataSource: getColumnData(t, ampA, ampB, ampC),
                  dashArray: <double>[5,5],
                  xValueMapper: (EqAmpData eqdata, _) => double.parse(eqdata.x),
                  yValueMapper: (EqAmpData eqdata, _) => int.parse(eqdata.y2),
                ),
                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.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

Answer 1

当您定义 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,
      dashArray: <double>[5, 5],
      xValueMapper: (EqAmpData eqdata, _) => double.parse(eqdata.x),
      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, ampA, ampB, ampC);

              return Card(
                child: SfCartesianChart(
                  series: <ChartSeries>[
                    prepareSerie(
                      dataSource: dataSource,
                      yValueMapper: (eqdata, _) => double.parse(eqdata.y1),
                    ),
                    prepareSerie(
                      dataSource: dataSource,
                      yValueMapper: (eqdata, _) => double.parse(eqdata.y2),
                    ),
                    prepareSerie(
                      dataSource: dataSource,
                      yValueMapper: (eqdata, _) => 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(),
    ((random.nextInt(100) - 50) / 1000).toString(),
  ),
);

图表未在 Flutter 中呈现

Chart not being rendered in Flutter

flutter

syncfusion-chart

易于复制粘贴的完整源代码