Chart
-
React로 Gauge Chart 만들기Language/React 2025. 2. 27. 17:07
2년전 차트로 화면을 표시할때 비슷한 차트 라이브러리를 찾고 커스터마이징해서 작업하는데 시간이 꽤 많이 소요되었다. 찾는것도 일이지만 직접 만들지 않았다보니 커스터마이징이 헬일경우가 많다.이번에 리뉴얼이 많이 되면서 비슷한 차트를 찾기도 힘들고 유지보수도 힘들것 같으니 직접 만들어보기로 했다. 1. Figma에서 화면 캡쳐 및 GPT에서 html로 변환 요청캡쳐 및 GTP 요청이렇게 요청하면 react-gauge-char등 기존 라이브러리를 찾아서 사용하라고 한다.. OTL.. 다시요청예상대로 svg로 만드는 법을 알려준다. 대충 만들어 진 코드 react에 복붙하면된다. 2. React 적용 및 커스터 마이징GPT로 요청한건 아직까지는 완벽하지 않다. 많이 부족하다.. 그래도 없는것 보다는!!아래 겁..
-
React/X-Bar chart 만들기Language/React 2022. 12. 1. 10:08
챠트를 만들어야 하는데 마땅한게 없어서 만들어 보았다. (x,y chart는 간단하니깐!) 데시보드 import React, { Component } from 'react'; ... class DashboardTab1 extends Component { ... render() { const receiptStatusCounts = { PAY_COMPLETE_AMOUNT: 50.0, PAY_COMPLETE_COUNT: 2, PAY_FAIL_AMOUNT: 3.0, PAY_FAIL_COUNT: 1, PAY_WAIT_AMOUNT: 7.5, PAY_WAIT_COUNT: 1, payCompletePercent: 50, payFailPercent: 25, payWatePercent: 25, }; const styleB..