Flutter syncfusion Linechart 重新绘制开始和结束系列数据之间的线

Question

I use syncfusion chart for flutter. I have json data on php api at my server. I had this data in flutter api connect.

My json data structure is like this:

  {
  "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
        }
    ],
   
  },
  
}

I use this code for prepare data for chart:

    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);
}

And I use chart page like this:

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,

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

so after then all of this page my chart build graphic but if I back another page and reopen chart page Linechart re-build new line beginning point and ending point. like this:

this

and this

If i use static List data in chart page its perfect but i use static data in future code like this

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

final result same...

is there any idea.

If you have different solution binding api line chart so I thank you for it.

Answer 1

The reported issue regarding line redrawn from start and endpoint of the line series is not reproduced at our end. We have used the code snippet provided in the query even though the issue didn't get reproduced. We have attached the sample for your reference. Can you please ensure whether data in your database is correct and also ensure proper data is bind to the chart, since we suspect that the first data is stored again, so the line gets closed. Since we are not aware of your exact data source and the issue is not replicated with the provided code, kindly get back to us by replicating your scenario with the attached sample.

Screenshot https://i.stack.imgur.com/uy4rD.png

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/i364893-1745166518.zip