[Framer X Code] chart.js로 차트 컴포넌트 만들기

차트를 하나하나 디자인할 수 있겠지만, 귀찮을 때!!!

그냥 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,
    Legend,
    LinearScale,
    CategoryScale,
    PointElement,
    LineElement
)
import { Doughnut } from "react-chartjs-2" //도넛!

• chart.js에서 위의 것들을 import 합니다. (왜 이렇게 많이 import 하느냐면, 뭐가 필요할지 몰라서 다 써놨습니다..)
• 밑에 register도 써줍니다. (얘도 뭘 쓸지 몰라서 다 Register 했습니다..)
• react-chartjs-2에서 Doughnut을 import 합니다.

도넛 말고도 Bar, Line, Pie, PolarArea, Radar, Scatter, Bubble 차트를 만들 수 있습니다.

참고 링크 : https://react-chartjs-2.js.org/components

2. chart Component 정의

다음으로 chart 컴포넌트를 생성합니다. (이름은 아무렇게나 지어도 괜찮습니다!!)

//컴포넌트 이름은 아무렇게나 지어도 되는거 모두 아시겠지!
export function chart() { 
		// Refer라는 변수에 차트의 데이터 담기 (라벨, 데이터셋)
    const Refer = {
        labels: ["햄버거", "피자", "콜팝"],
        datasets: [
            {
                label: "비중",
                data: [40, 40, 20],
                backgroundColor: ["#ccecff", "#99d9ff", "#3182F5", "#2278ab"],
                //
                borderWidth: 0,
            },
        ],
    }
		// options라는 변수에 차트의 옵션 넣기
    const options = {
        plugins: { legend: { display: false } },
    }
    return (
        <Doughnut
            style={{ overflow: "visible" }}
            data={Refer}
            options={options}
        />
    )
}

• chart라는 이름으로 컴포넌트를 만들어줍니다.
• Refer에 차트의 데이터를 넣어줍니다.
• options에 차트의 option들을 넣어줍니다.
• Doughnut 태그에 style, data, options를 이쁘게 넣어 return 해줍니다.

차트에 다른 option들도 넣을 수 있습니다. Legend를 없앨 수도 있고, tooltip을 커스텀할 수 있고, scale도 커스텀할 수 있고, interaction도 넣을 수 있고 등... 원하는 option을 어떻게 넣는지 궁금하시다면...

참고 링크 : https://www.chartjs.org/docs/latest/general/options.html

3. 페이지에 차트 컴포넌트 넣기

• 페이지로 가서 Assets 패널에 chart라는 이름의 컴포넌트를 끌고 와 붙여 넣어줍니다.
• 그리고 우측 패널에서 Size를 Fit에서 Fixed로 바꿔주면 크기 조정이 가능합니다.

4. 결과

애니메이션이 디폴트로 들어가 있습니다. (편안)

Hover하면 tooltip도 볼 수 있어요! 앞에서 말했다시피 tooltip은 options에서 커스텀도 가능합니다! 

5. 전체 코드

import type { ComponentType } from "react"
import {
    Chart as ChartJS,
    LinearScale,
    ArcElement,
    CategoryScale,
    PointElement,
    LineElement,
    Tooltip,
    Legend,
} from "chart.js"
ChartJS.register(
    ArcElement,
    Tooltip,
    Legend,
    LinearScale,
    CategoryScale,
    PointElement,
    LineElement
)
import { Doughnut } from "react-chartjs-2"

export function chart() {
    const Refer = {
        labels: ["햄버거", "피자", "콜팝"],
        datasets: [
            {
                label: "비중",
                data: [40, 40, 20],
                backgroundColor: ["#ccecff", "#99d9ff", "#3182F5", "#2278ab"],
                borderWidth: 0,
            },
        ],
    }
    const options = {
        plugins: { legend: { display: false } },
    }
    return (
        <Doughnut
            style={{ overflow: "visible" }}
            data={Refer}
            options={options}
        />
    )
}

---

차트를 더욱 잘 쓰고 싶으시다면! 아래 두 개 링크를 많이 참고해 주세요 ㅎㅎ 

react-chartjs-2 : https://react-chartjs-2.js.org

chart.js : https://www.chartjs.org/docs/latest/