Flutter同步线图重新绘制开始和结束系列数据之间的线

8i9zcol2  于 2023-01-21  发布在  Flutter
关注(0)|答案(1)|浏览(121)

我在flutter中使用了syncfusion图表。我在服务器上的API上有json数据。我在flutter api connect中有这个数据。
我的json数据结构是这样的:

{
  "tablo": "neyzi",
  "cinsiyet": "erkek",
  "boy": {
    "P3": [
      {
        "0.0": 45.9,
        "3.0": 56.2,
        "6.0": 62.8,
        "9.0": 67.4,
        "12.0": 70.8,
        "15.0": 73.8,
        "18.0": 76.4
        }
    ],
   
  },
  
}

我使用这个代码为图表准备数据:

import 'package:flutter/material.dart';
import 'package:pediatrirutinmobil/pers_chart/chart_olcumdizisi.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'chart_api.dart';

class PersentilChartRepository{
  static PersentilChartApiClient _persentilchartApiClient = PersentilChartApiClient();

  static List<OlcumDizisi> _p3 =[];
  

  static Future apiden_data_getir ()async{
    return await _persentilchartApiClient.veriyigetir();
  }

  static Future<List<OlcumDizisi>> persentilListesi ()async{

  }


  static List boyListesi() {

  

    apiden_data_getir().then((value) async{
  
      var P3e = await value.boy.P3[0];
    

    for (final mapEntry in P3e.entries) {

        final key = await double.parse(mapEntry.key.toString());
        final double value = await double.parse(mapEntry.value.toString());
        if (key<=limit){
       _p3.add(OlcumDizisi(key, value));
      }
      }
      
     
    // _p3.addAll([OlcumDizisi(6,60),OlcumDizisi(7, 80),OlcumDizisi(10, 90)]);
      */
    } );

       List<ChartSeries<OlcumDizisi,double>> chartSeries =  [
       new LineSeries<OlcumDizisi, double>(
         name: 'P3',
         xValueMapper: (OlcumDizisi olcum, _) => olcum.yasay,
         yValueMapper: (OlcumDizisi olcum, _) => olcum.olcum,
         dataSource: _p3,
         color: Colors.red,
         width: 0.75,
         
       )
        
     ];
      
    return  chartSeries;
  }

}

class OlcumDizisi {
  final double yasay;
  final double olcum;

  OlcumDizisi(this.yasay, this.olcum);
}

我使用的图表页面是这样的:

import 'dart:core';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:pediatrirutinmobil/pers_chart/chart_repo.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class StackedAreaLineChart extends StatefulWidget {

  @override
  State<StackedAreaLineChart> createState() => _StackedAreaLineChartState();
}

class _StackedAreaLineChartState extends State<StackedAreaLineChart> {
  List _charset;
  @override
  void initState() async{
     _charset = await PersentilChartRepository.boyListesi();
     setState(() {
       
     });
    // TODO: implement initState
    super.initState();
  }
  @override
  void dispose() {
    _charset;
    // TODO: implement dispose
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
             body: SafeArea(
               child: Center(
                 child: Container(
                  
                   child:  SfCartesianChart(
                       primaryXAxis: CategoryAxis(),
                       primaryYAxis: NumericAxis(
                         numberFormat: NumberFormat.decimalPattern()
                       ),
                       // Chart title
                       title: ChartTitle(text: 'TITLE'),
                       // Enable legend
                       legend: Legend(isVisible: true),
                       // Enable tooltip
                       tooltipBehavior: TooltipBehavior(enable: true),
                       series:_charset,
                       enableSideBySideSeriesPlacement: false,

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

因此,在此之后,所有这一页我的图表构建图形,但如果我回到另一页,并重新打开图表页Linechart重新构建新的行起点和终点。像这样:
this
and this
如果我使用静态列表数据在图表页的完美,但我使用静态数据在未来的代码像这样

apiden_data_getir().then((value) async{
      
       _p3.addAll([OlcumDizisi(6,60),OlcumDizisi(7, 80),OlcumDizisi(10, 90)]);
          
        } );

最终结果相同...
有什么想法吗。
如果你有不同的解决方案绑定API线图所以我感谢你。
我们在github上聊天

static Future apiden_data_getir() async {
    ///this code     
if (_p3.isNotEmpty) {
          _p3.clear();
        }
    /// helpfull it's work
        final String jsonString = await getJsonFromAssets();
        final dynamic jsonResponse = json.decode(jsonString);
        var p3e = jsonResponse['boy']['P3'][0];
hjzp0vay

hjzp0vay1#

问题似乎出在您的init state上。每次访问图形页面时,相同的数据都会重复添加到数据源中,从而在图形中创建一个闭合循环。您可以通过在series:_charset这一行放置调试器点来查看添加到序列中的重复值来验证这一点。
尝试用Future构建器 Package SfCartesianChart小部件,并在那里获取数据,而不是在initState中进行API调用。

相关问题