显示数据库中的波动图

时间:2019-09-11 03:29:30

标签: flutter dart flutter-web

在这里,我在波动图上显示数据库中的数据,但是当在浏览器中时,它看起来是like this。如果这是我的代码

class Chart extends StatefulWidget {
  final String ..;

  Chart({this.user_id, this.projectName, this.userName});
  @override
  _ChartState createState() => _ChartState(user_id: this.user_id, projectName: this.projectName, userName: this.userName);
}

class _ChartState extends State<Chart> {
  String /..;

  _ChartState({this.projectName, this.user_id, this.userName});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: FutureBuilder(
        future: ActivityController.getWorkTimeByUiPn({
      "user_id": user_id,
      "project_name": projectName,
    }),
        builder: (context, snapshot) {
          if (snapshot.hasError);
          return snapshot.hasData
              ? Itemchart(
                  iList: snapshot.data,
                )
              : Center();
        },
      ),
    );
  }
}

class OrdinalSales {
  final String name;
  final int count;

  OrdinalSales(this.name, this.count);
}

class Itemchart extends StatelessWidget {
  final List<dynamic> iList;
  Itemchart({this.iList});

  @override
  Widget build(BuildContext context) {
    List<OrdinalSales> tsdata = [];
    if(iList != null){
      for (final i in iList) {
        try{
          tsdata.add(OrdinalSales(i['project_name'], i['durasi']));
        }catch (e) {
          print(e.toString());
        }
      }
    }else{
      return Text("NULL");
    }

    var series = [
      charts.Series(
        domainFn: (OrdinalSales ordinalsales, _) => ordinalsales.name,
        measureFn: (OrdinalSales ordinalsales, _) => ordinalsales.count,
        id: 'OrdinalSales',
        data: tsdata,
      )
    ];
    var chart = charts.BarChart(series, animate: true);
    var chartWidget = Padding(
      padding: EdgeInsets.all(32.0),
      child: SizedBox(
        width: 700.0,
        height: 400.0,
        child: chart,
      ),
    );
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Jumlah  : ${iList.length.toString()}",
              style: Theme.of(context).textTheme.title,
            ),
            chartWidget,
            //Text(tsdata.toString())
          ],
        ),
      ],
    );
  }
}

数据没有出现,我在这里有些困惑,因为当我尝试print (tsdata.toString ())结果[]时。.我认为数据丢失了/不包含在OrdinarySales类中,或者在tsdata中?当我尝试打印(iList.toString())时,数据在那里

1 个答案:

答案 0 :(得分:1)

iList可能是字符串列表,请检查它是否是具有所需键的对象列表。

for (var i in iList) {
  print(i.runtimeType);
}

尝试类似的东西:

Itemchart(iList: [
        {'project_name': 'first', 'durasi': 1},
        {'project_name': 'second', 'durasi': 2},
        {'project_name': 'third', 'durasi': 3},
      ]),
    ),

如果您看到图表,则问题出在数据上,而不是图表或OrdinalSales类,因此您提供的代码运行良好。但是我很难说iList数据出了什么问题,因为我看不到它。

希望它将帮助您朝着正确的方向迈出下一步