[Framer X Code] chart.js로 차트 컴포넌트 만들기
·
Framer
차트를 하나하나 디자인할 수 있겠지만, 귀찮을 때!!! 그냥 chart.js로 그래프를 넣어버리자!!! 0. 코드 파일 생성하기 오늘 만들 친구는 코드 컴포넌트입니다. Code component 파일을 만들어줍니다. 저는 파일 이름을 Chart라고 지었습니다. 그리고 오늘 저는 도넛 차트를 그릴 겁니다! 1. chart.js 사용 세팅 chart.js를 사용하기 위해서는 아래의 것들을 import 해야 합니다. import { Chart as ChartJS, LinearScale, ArcElement, CategoryScale, PointElement, LineElement, Tooltip, Legend, } from "chart.js" ChartJS.register( ArcElement, Tooltip..
[Framer X Code] Override로 Hover & Click Effect 만들기
·
Framer
Override 생성하는 방법을 모르신다면... Code Override 만들기 게시글을 먼저 보고 와주세요. Code Override 만들기 : https://minny-it.tistory.com/4 [Framer X Code] Code Override 만들기 *리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 코드 override는 인터렉션, 데이터 처리? 좀 더 동적인 화면을 만드는데 쓰입니다. 이 게시글은 https://www.framer.com/deve minny-it.tistory.com 0. 코드 Override 생성하기 우선 Override 파일을 만들어줍니다. 저는 Effects라고 이름을 지었습니다. 1. Override 코드 작성하기 저는 Override 함..