어리둥절 분석가 그리고 개발자

✔️ 필요성 바 차트와 라인 차트가 혼합된 멀티 차트에서 이번에는 양쪽 y축을 함께 사용하는 multi Axis까지 활용해보고자 한다 ✔️ 문제 해결 해당 예제를 동일하게 잘 따라하면 된다 ㅎ https://react-chartjs-2.js.org/examples/multiaxis-line-chart Multiaxis Line Chart | react-chartjs-2 Example of multiaxis line chart in react-chartjs-2. react-chartjs-2.js.org scales에 y와 y1을 만든 다음에 (이름은 달라도 된다) datasets에서 yAxisID에 해당 축이름을 기재해주면 된다. grid나 ticks 옵션을 적절하게 사용하면 내가 원하는대로 조정이 가능하..

✔️ 필요성 react에서 Chart.js wrapper인 react-chartjs-2을 사용하여 멀티타입 차트를 그리려고 한다. 아래에 예제가 나와있어서 그대로 가져다가 써보았는데 에러가 난다. https://react-chartjs-2.js.org/examples/multitype-chart Multitype Chart | react-chartjs-2 Example of multitype chart in react-chartjs-2. react-chartjs-2.js.org 아래처럼 바 차트와 라인차트를 동시에 그리는 멀티타입 차트를 그리려고 한다 ✔️ 에러 상황 아래처럼 Dimensions를 활용해서 스크린의 너비를 가져오거나, 혹은 다른 어떤 value 값으로 지정해놓고 참조할 때 px를 까먹는 ..

✔️ 필요성 무료이고 가벼워서 차트 라이브러리로 많이 쓰이는 chart.js! 리액트 계열에서 사용할 때에는 react wrapper인 react-chartjs-2 를 사용하면 된다. chart.js의 custom-tooltip을 만들 때 이미지를 툴팁에 포함하고 싶을 때는 조금 어렵지만 아래와 같이 하면 된다. 공식 문서와 stack-overflow를 이틀간 삽질해서 겨우 성공했다. https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips Tooltip | Chart.js Namespace: options.plugins.tooltip, the global options for the chart toolt..

✔️ 필요성 차트를 그릴 때 데이터 value를 그대로 표시하고 싶은 경우도 있지만 비율을 표시하고 싶을 때도 있다 { valueFontSize: '15', valueAlpha: '80', showValues: '1', } ✔️ 문제 해결 showPercentValues를 활성화해준 뒤, decimals를 통해 소숫점을 조정하고 numberSuffix를 통해 %를 붙여준다 { valueFontSize: '15', valueAlpha: '80', showValues: '1', showPercentValues: '1', decimals: 0, numberSuffix: '%', }

✔️ 필요성 Victory Native에서 x축과 y축을 예쁘게 꾸며봅시다 ✔️ x축 꾸미기 x축은 모든 숫자가 다 label로 나오게 하고 싶고, tick과 x축은 보이지 않게 하고 싶다. ✔️ y축 꾸미기 y축은 위치를 offsetX를 통해서 약간 이동시킨 다음에, 초를 분으로 바꿔서 2분 단위로 label이 나타나기를 원한다. 그리고 옅은 회색으로 보조선을 그리고 싶다. (grid) `${secondsToMinute(value)}`} /> ✔️ 통합 예제 코드 import React from 'react'; import styled from 'styled-components/native'; import {VictoryAxis, VictoryBar, VictoryChart} from 'victory-..

✔️ 필요성 Victory Native로 라인차트 두개를 겹쳐서 그리고 싶을 땐 어떻게 할까? ✔️ 문제 해결 너무 쉽다.... Victory Native 최고!!! 두개를 그냥 아래처럼 쌓아주면 된다 색깔이 다른 라인 두개가 생겼으니 범례를 만들어줘야겠지. 로 아래처럼 만들어주고 내부에 넣어주면 된다.

✔️ 필요성 Victory Native로 라인차트 두개를 겹쳐서 그리고 싶을 땐 어떻게 할까? ✔️ 문제 해결 너무 쉽다.... Victory Native 최고!!! 두개를 그냥 아래처럼 쌓아주면 된다 색깔이 다른 라인 두개가 생겼으니 범례를 만들어줘야겠지. 로 아래처럼 만들어주고 내부에 넣어주면 된다.

✔️ Victory Native 활용 예제 파헤치기 Victory Native 개인적으로 너무 만족스러운 라이브러리이다. 무엇보다 가볍고 사용법이 직관적이고, 기본적으로 제공하는 옵션들도 다양하다. Victory Native로 그린 아래 차트를 어떻게 그렸는지 기록해두고, 내가 라이브러리 사용할 때마다 찾아보려고 한다. ✔️ 전체 코드 import React from 'react'; import {View} from 'react-native'; import styled from 'styled-components/native'; import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup, VictoryLegend, VictoryLine, VictorySca..

✔️ 필요성 여러가지 차트(Bar, Line, StackedBar)를 하나의 축 위에 겹쳐 그리고 싶을 때가 많다. (복합차트) Victory Native는 복합 차트를 그리는 것이 매우 쉽다. 해당하는 컴포넌트를 그냥 같이 겹쳐 붙이기만 하면 된다. import React from 'react'; import styled from 'styled-components/native'; import { VictoryAxis, VictoryBar, VictoryChart, VictoryLine, } from 'victory-native'; const Container = styled.View` flex: 1; align-items: center; justify-content: center; `; const da..

✔️ 필요성 Bar 차트를 그린다고 하면 모든 Bar가 같은 색상을 가진게 아니라 특정값에 따라 동적으로 차트의 스타일(색깔 등)을 바꾸고 싶을 때가 있다. https://formidable.com/open-source/victory/docs/common-props/#style Victory | Common Props Not every component uses all of these props. These are all common to things like VictoryBar, VictoryScatter, but other components like VictoryStack use only some of them. The props explanations given here are general. E..