728x90 반응형 리액트 차트3 [대시보드] amcharts 라이브러리 사용 리액트 Bar 차트 amcharts 로 차트를 생성하는 코드이다. amcharts 중 버전 5 사용 amcharts 를 install 하고 import 해준다. import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조 let data = { {category : '기억' , value : 1 } , {category : '니은' , value : 1 } , {category : '디귿' , value : 1 } , .... .... {category : '히읏' , value : .. 2023. 8. 27. [react-chartjs-2] 누적 그래프 + 라인 그래프 합치기 리액트 차트를 만들면서 가장 오류/버그 적게 사용한 차트 라이브러리는 react-chartjs-2 react-chartjs-2 의 단점은 공식사이트의 정보가 다소 부족하고 ( 다른 라이브러리도 동일) 화려한 애니메이션이 기본으로 제공되지 않다. 그러나 충분히(많이 찾아보고) 커스텀 가능 하다 react-chartjs-2 라이브러리에선 누적 바 차트 / 라인 차트 가 분리되어 있지만 바 차트 + 라인차트 같이 출력하는 코드를 보고 누적 바 + 라인 차트를 커스텀해 만들어보았다. 출력되는 그래프 toolTip 도 커스텀 해서 출력 하였다 😁 npm install //기본 설치 npm i chart.js //차트제이에스 2를 사용하기 위한 설치 npm install react-chartjs-2 chart.js.. 2022. 7. 12. [nivo chart] HeatMap chart 리액트 니보 차트 라이브러리 사용법 니보 공식사이트는 추가설명이 너무 불친절 해서 사용하기 어려웠다. 초반 어떤걸 다운 받고 어떤걸 임포트 해야하는지 정보제공이 매우 불친절.. 그럴꺼면 왜 공식사이트를 만든건지 개인적으로 평소 차트 라이브러리는 chart js 를 가장많이 사용한다. chart js는 아쉽게도 HeatMap 차트가 없다. https://nivo.rocks/ Home | nivo nivo.rocks 🍖완성 화면 🍕Install // npm install @nivo/core // 기본적으로 설치 // npm install @nivo/heatmap 🍔import import { ResponsiveHeatMap } from '@nivo/heatmap' 차트 라이브러리 는 대부분 2가지만 신경쓰면된다 data / option - 데.. 2022. 7. 4. 이전 1 다음 728x90 반응형
