Syncfusion 차트에서 그래프 안보이는 문제, 그리고 선 그래프 짤리는 문제

 

 

 

 

Syncfusion 차트에서 그래프 안보이는 문제

 

Syncfusion  에서 제공하는 flutter open source 중에 그래프 그리는 패키지가 잘 만들어져 있다. 

 

https://pub.dev/packages/syncfusion_flutter_charts

syncfusion_flutter_charts | Flutter Package

 

이 패키지에서 x 축에는 일, 주(1월1주, 1월2주), 월 별로 표시하고 y  축에는 계산 결과값을 double 형태로 보여주고 있다. 

app의 버튼을 클릭할 때 마다 보여줄 data를  DB 에서 가져와 가공을 하는 프로세스를 진행하고, 가공이 끝나면 obs 변수를 통해 event를 발생시켜서 그래프 화면을 표시(또는 갱신) 하도록 하고 있다. 

 

혹시나 DB에에서 가져온  data를 그래프로 출력할 수 있게 가공하는 과정이 오래 걸릴까봐 future, await를 이용해서 비동기로 작업하는 일이 없더록 코딩을 했다. 

 

그런데 주 별 그래프 표시를 누를때면 그래프 화면에 data가 아무것도 출력되지 않고 x축 라벨도 표시되지 않는 것이었다. 

이유를 찾기위해서 이래저래 수정을 해본 결과

 

SfcarterianChart 에 입력하는 x 축 data 가 중첩되는 것들이 있어서 이를 처리하는 delay로 인해 화면에 제때 출력하지 못하는 것 같다. 

x 축 구간으로 categoriAxis를 이용했는데 x 축을 나타내는 data가, 주 별 그래프 일 경우, '2주, 3주, 4주' 처럼 월별로 계속해서 같은 text 의 값이 존재했고, SfcarterianChart  에서는 x축 data를 나타내는 text가 같을 경우 같은 column 에 표시하기 위해서 그래프에서 y값을 최신값으로 다시 그리고 있었다. 이로인해 실제 화면에 출력되는 data 의 length는 중복되는 x 축 값 때문에 줄어들고....이래저래 연산이 꼬이는 듯했다.

 

출력하려는 x축 데이터를 년,월,일을 모두포함하게 해서 각각이 independent 하게 했더니, 버튼을 눌렀을 때 그래프가 뜨지 않는 문제는 해결 되었다. 

 

x 축 label이 길어지는 문제는 axisLabelFormatter 콜백을 통해 해결해야 하면 될 듯하다.  

 

 

 

선 그래프 짤리는 문제 

 

SfCartesianChart 에서 선형 그래프를 표시하려고 했다. 초기에 100개의 데이터 중 화면에 뿌려지는건 마지막 10개로 설정을 했다. 이렇게 설정하면 그래프의 왼쪽 끝부분은 90 뻔째 data와 89 번째 data 가 연결되는 선의 일부분이 화면에 보여야 하는데 90번째 data와 91번째 data를 연결하는 선으로 시작하고 있었다. 

 

이걸로 3시간 동안 원인을 찾아 해맸다. 

 

원인은 SfCartesianChart 버그인듯 한데, y 축 설정 에서도  visibleMinimum  또는 visibleMaximum  파라미터중 하나를 입력해줘야 정상적으로 동작을 했다. 왜 관련도 없는 y 축 설정 파라미터 중하나를 입력해줘야하는지 내부적으로 들어가보지는 않았다. 암튼 버그다. 버그.