时间戳

首页 > 解决方案 > Flutter-无法在折线图中设置坐标？

flutter - Flutter-无法在折线图中设置坐标？

问题描述

我在折线图中遇到问题。我正在从 sq lite 数据库中获取 x 和 y 数据。它应该设置在折线图中。当活动开始时图表显示空白。但只有单击图表值才能在图表中设置。我正在使用charts_flutter dart 包进行实施。我在哪里做错了。任何解决方案。

Future graph_initialize()  {
Future<List<Map>> noteListFuture1 = dbHelper.get_lactation_curve("${widget.value.tag}");//fetching data from databse
noteListFuture1.then((noteList)  {
  for(int i=0;i<noteList.length;i++){
    print(noteList[i]["Days"].toString()+","+noteList[i]["Milk_Yield"].toString());
    milking_data.add( new Sales(noteList[i]["Days"], noteList[i]["Milk_Yield"]));
  }
_serieslineData.add(charts.Series(
    colorFn: (__, _) => charts.ColorUtil.fromDartColor(Colors.red),
    id: 'lac',
    data: milking_data,// here data is setting
    domainFn: (Sales sales, _) => sales.yearval,
    measureFn: (Sales sales, _) => sales.salesval));
  setState(() {

  });

});}

@override
 void initState() {
super.initState();
_serieslineData =  List<charts.Series<Sales, int>>();
graph_initialize();//function call
}

Widget show_chart(){
return Padding(
 padding: EdgeInsets.all(8),
 child: Container(
   height: 300,
   child: Column(
     children: <Widget>[
       Text('Lactation Curve',
           style: TextStyle(fontSize: 16,  fontFamily: 'Montserrat',fontWeight: FontWeight.bold)),
       Expanded(
           child: charts.LineChart(_serieslineData,
               animate: false,
               domainAxis: charts.NumericAxisSpec(
                   tickProviderSpec:
                   new charts.BasicNumericTickProviderSpec(
                     desiredTickCount: 11,
                   ),
                   viewport: charts.NumericExtents(
                     0,
                     300,
                   )),
               animationDuration: Duration(seconds: 3),
               behaviors: [
                 charts.ChartTitle('Milk Yield',
                     behaviorPosition: charts.BehaviorPosition.start),
                 charts.ChartTitle('Days in Milk',
                     behaviorPosition: charts.BehaviorPosition.bottom),
                 charts.ChartTitle(
                   '',
                 ),
                 charts.ChartTitle('                           ')
               ])),
       Padding(
         padding: const EdgeInsets.all(8.0),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: <Widget>[label(Colors.red,'Lac'),
             label(Colors.lightBlueAccent,'Milk(kg)'),
             label(Colors.amber,'A.I'),
             label(Colors.green,'Pregnant'),
             label(Colors.blueGrey,'Vaccination'),
             label(Colors.black,'Treatment'),

           ],
         ),
       )
     ],
   ),
 ),
);
}

标签： flutterdart

解决方案

您需要一个bool loading or isLoading来控制，因为图表数据尚未准备好
并且在加载时 == true 返回CircularProgressIndicator()或Container() 

bool loading = false;

Future graph_initialize()  {

loading = true;

Future<List<Map>> noteListFuture1 = dbHelper.get_lactation_curve("${widget.value.tag}");//fetching data from databse
noteListFuture1.then((noteList)  {
  for(int i=0;i<noteList.length;i++){
    print(noteList[i]["Days"].toString()+","+noteList[i]["Milk_Yield"].toString());
    milking_data.add( new Sales(noteList[i]["Days"], noteList[i]["Milk_Yield"]));
  }
_serieslineData.add(charts.Series(
    colorFn: (__, _) => charts.ColorUtil.fromDartColor(Colors.red),
    id: 'lac',
    data: milking_data,// here data is setting
    domainFn: (Sales sales, _) => sales.yearval,
    measureFn: (Sales sales, _) => sales.salesval));
  setState(() {
     loading = false;
  });



});}


Expanded(
       child: loading?  CircularProgressIndicator() : charts.LineChart(_serieslineData,
           animate: false,
           domainAxis: charts.NumericAxisSpec(
               tickProviderSpec:

推荐阅读