Диаграмма не отображается во 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, 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;
   }

Экран после сборки:введите описание изображения здесь

Снимок экрана с имеющимися у меня данными:введите описание изображения здесь

Источник

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(),
  ),
);
Источник
Другие вопросы по тегам