리액트 그래프2 [대시보드] amcharts 라이브러리 사용 리액트 누적 막대 그래프 만들기 어렵지 않게 누적 막대그래프 만드는 코드 입니다. amcharts 라이브러리를 임포트 해줍니다. import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조는 이러합니다. Arr가 아닌 Obj 구조 var data = [ {"date": "2023-10-01","A": 5,"B": 2,"C": 0,"D": 1,"F": 1,"G": 1}, {"date": "2023-10-02","A": 12,"B": 13,"C": 0,"D": 1,"F": 1,"G": 1}, {"da.. 2023. 10. 17. [React] apexcharts 를 이용한 도넛 그래프 예제 저는 실제 데이터를 받아와서 출력했습니다. (아래 코드는 임의 데이터 넣은것) 퍼센테이지로 출력되며 hover시, 데이터라벨명과 값이 tooltip으로 출력됩니다. 도넛 가운데 total 카운트 도 출력되는 예제입니다. 리액트 그래프 라이브러리중 간결하며 사용하기 좋은 라이브러리 입니다. 라이브러리 사용하여, 도넛 그래프 출력 😎npm install / import import ReactApexChart from "react-apexcharts"; //npm install react-apexcharts apexcharts 😎script 코드 //도넛 차트 데이터 및 옵션 const donutData = { series: [50,40,30,10,0], options: { chart: { type: 'don.. 2022. 4. 8. 이전 1 다음 728x90 반응형
