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

import styled from '@emotion/styled'; import React from 'react'; import { VictoryChart, VictoryScatter, VictoryBar, VictoryAxis, VictoryLabel, VictoryContainer } from 'victory'; import { ReactComponent as Svg1} from "./svg/file1.svg"; import { ReactComponent as Svg2} from "./svg/file2.svg"; import { ReactComponent as Svg3} from "./svg/file3.svg"; import { ReactComponent as Svg4} from "./svg/file..

Victory Chart에서 제공하는 DataComponent 기능을 활용하면 SVG를 쉽게 차트 위에 올릴 수 있다! import styled from '@emotion/styled'; import React from 'react'; import { VictoryChart, VictoryLine, VictoryScatter } from 'victory'; import SvgFailedToLoad from "../../../public/assets/images/common/failed-to-load.svg"; const StyledPoint = styled.circle` fill: ${(props) => props.color}; `; const Container = styled.div` width: 80..

Victory 차트를 그리는데 발생한 에러 types/react 버전이 17이라면 types/react 버전을 18 버전으로 바꿔주면 된다 yarn add @types/react yarn add --dev @types/react or npm install @types/react 혹은 victory 버전을 낮춰준다 "victory": "36.5.3",

Chart.js에서 Canvas Size 바꾸기 chart.js에서 canvas size를 바꾸기 어려운 이유는 캔버스의 크기를 상위 태그에서 선지정을 하기 때문이다. 그러니까 이미 캔버스의 크기가 그려지고, 그 내부에서 차트가 그려지기 때문에 고정된 캔버스의 크기 안에 차트가 어떻게든 찌그러들거나 늘어나거나 해서 그려진다는 이야기이다. 그래서 Canvas 크기 자체를 바꾸기 위해서는 다른 방법을 사용해야하는데, asPectRatio 값을 바꿔서 차트 사이즈를 바꾸는 것도 가능하지만 더 편한 방법은 onResize 함수를 사용하는 것이다. onResize 함수는 사후적으로 canvas parantNode의 style을 바꿔준다. 아래 예시는 데이터의 길이에 따라서 canvas의 높이를 dynamic하게 ..

가끔씩 차트를 그리다 보면 성/연령대별로 인구 분포를 나타내기 위해서 인구피라미드 차트를 그려야 할 때가 있다. 영어로는 population pyramid라고 할 때도 있고 age pyramid라고 할 때도 있는 듯하다. Chart.js에서는 인구피라미드 차트를 Stacked Bar 차트를 활용해서 아주 간단하게 그릴 수 있다. 위의 차트를 그리기 위한 코드를 전체로 복붙해서 쓸모없는 부분이 일부 있기는 하지만 1) Datasets에서 데이터를 음수로 바꿔주는 부분 2) indexAxis를 'y'로 지정해서 90%로 차트를 회전시키는 부분 3) xAxes에서 음수 ticks를 양수로 바꿔주는 부분 이 가장 핵심이다 import styled from "@emotion/styled"; import React..

✔️ 필요성 Chart.js로 차트를 그릴 때 축의 tick 값을 임의의 정해진 값으로 지정하고 싶을 때가 있다. 옵션에서 stepSize를 사용할 수도 있지만 linear하지 않은 축 value를 가지고 싶을 때는 어떻게 해야할까 scales: { y: { suggestedMin: 0, suggestedMax: 200, ticks: { stepSize: 50, } } } ✔️ 문제 확인 tick과 관련된 여러가지 callback이 있는데 그 중에서 afterTickToLabelConversation을 사용할 수 있다 https://www.chartjs.org/docs/latest/axes/#tick-configuration Axes | Chart.js Axes Axes are an integral pa..

Chart.js는 웬일인지 모르겠는데 차트 크기가 고정되어 있다. 내가 원하는건 데이터의 크기에 따라서 세로 길이가 길어지게 하는거였기 때문에 맨 처음에는 height = {2n} 이런식으로 설정하고 싶었다. 구글링을 해보니 이걸 바꾸는 방법은 responsive와 maintainAspectRatio를 false로 하는 것이라는데, 실제로 해당 옵션을 false 값으로 바꾸고 나니 이상하게 차트 모양이 일그러졌다. https://www.chartjs.org/docs/latest/configuration/responsive.html Responsive Charts | Chart.js Responsive Charts When it comes to changing the chart size based on t..

const xAxisTickColor = (c: any) => { switch (getDow(date[c.index])) { case "일": return "#FF0000"; case "토": return "#000080"; default: return theme.colors.gray6e; } }; const options = { scales: { xAxes: { ticks: { autoSkip: false, labelOffset: 4, padding: 4, font: { size: 16, }, color: xAxisTickColor, }, grid: { display: false, //뒷배경 라인 없애기 }, }, x: { display: false, //하단 라인을 없애기 ticks: { displa..

✔️ 필요성 Chart.js에서 y축이나 x축에 label을 기입하고 싶을 때가 있다 ✔️ 문제 해결 Chart.js는 옵션이 왜이렇게 다양할까..? 심지어 documnet가 잘 안되어 있는 것이 문제다..... title을 이용해서 만들어줄 수 있다 const options = { scales: { y: { type: "linear" as const, display: true, position: "left" as const, title: { display: true, text: "probability", font: { size: 15, }, }, grid: { drawOnChartArea: false, }, ticks: { font: { size: 14, }, }, }, y1: { type: "line..

여기서 라인 차트위에 있는 동그라미 포인트를 없애고 싶으면 options에 다음과 같이 추가해주면 된다! const options = { elements: { point: { radius: 0, }, }, };