react-native-gifted-charts 에서 차트 라인 끊기

간단한 팁을 올려 두는 것이라서 경어체를 사용하지 않는다는 점 이해해 주셨으면 합니다.

react native의 차트에서 없는 수치를 제대로 표기 못하는 문제가 발생했다.

이 문제를 해결하기 위해서 여러 가지 방법을 찾았으나, 제대로 된 방법을 찾지 못해 며칠간 고생을 했다.

AI 로 해결을 될 줄 알았는데, 0을 넣으라는 둥, null을 넣으라는 둥 이상한 방법만 알려주었다.

react-native-gifted-charts 의 설치된 버전은 1.4.63 이다.

const

before

Data

=

[

{

value

:

102

,

label

:

''

},

{

value

:

121

,

label

:

''

},

{

value

:

110

,

label

:

''

},

{

value

:

108

,

label

:

''

},

];

const

afterData

=

[

{

value

:

134

,

label

:

''

},

// 3주차 - 데이터 있음

{

value

:

124

,

label

:

''

},

// 4주차 - 데이터 있음

];

이렇게 출력되는 데이타였다. 그러면서 afterData가 좌측으로 밀리면서 출력하는 문제가 발생한 것이였다.

그래서 afterData를 아래처럼 변경 했으나, 원치 않는 결과였다. 없는 데이타를 0으로 표기한 것이니 이것을 출력하게 되는 것이였다.

const

afterData

=

[

{

value

:

0

,

label

:

''

},

// 1주차 - 데이터 없음

{

value

:

0

,

label

:

''

},

// 2주차 - 데이터 없음

{

value

:

134

,

label

:

''

},

// 3주차 - 데이터 있음

{

value

:

124

,

label

:

''

},

// 4주차 - 데이터 있음

];

그래서 이것의 불필요한 데이타를 처리하기 위해서는 interpolateMissingValues={false} 를 적용하면 된다.

우선 데이타를 0으로 하면 변화가 없으니 null로 대체해야 한다.

const

afterData

=

[

{

value

:

null

,

label

:

''

},

// 1주차 - 데이터 없음

{

value

:

null

,

label

:

''

},

// 2주차 - 데이터 없음

{

value

:

134

,

label

:

''

},

// 3주차 - 데이터 있음

{

value

:

124

,

label

:

''

},

// 4주차 - 데이터 있음

];

<

LineChart

data

=

{

beforeData

.length

>

0

?

beforeData

:

afterData

}

data2

=

{

beforeData

.length

>

0

&&

afterData

.

length

>

0

?

afterData

:

undefined

}

showDataPointsForMissingValues

=

{

false

}

interpolateMissingValues

=

{

false

}

LineChart의 데이터 배열에서 null 또는 undefined 값을 만나면 기본적으로 보간(interpolation)이 적용되어 선이 연속적으로 그려지는데, 이것을 막기 위해서 interpolateMissingValues={false}로 설정하면, 해당 값에서 라인이 끊어지게 된다.

그렇게 처리된 최선 차트..

원하는 형태로 차트가 구성이 되었다.

이 글은 블로그 이전으로 티스토리에서 가져온 글입니다.