react chart js 간단 사용

Chart.js는 데이터를 시각화하기 위한 강력한, 유연한 차트 라이브러리입니다. React 애플리케이션에서 Chart.js를 사용하려면, react-chartjs-2와 chart.js 라이브러리를 함께 사용하는 것이 일반적입니다. react-chartjs-2는 Chart.js를 React 컴포넌트로 감싸서 사용하기 쉽게 만든 래퍼(wrapper)입니다.

참고사이트:chart.js

1. 필요한 라이브러리 설치하기

npm install chart.js react-chartjs-2

2. 차트 컴포넌트 생성하기

설치가 완료되면, 차트를 표시할 컴포넌트를 생성합니다. 예를 들어, 간단한 막대 차트를 만드는 방법은 다음과 같습니다

import React from 'react';
import { Bar } from 'react-chartjs-2';
import 'chart.js/auto';

const BarChart = () => {
  const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };

  const options = {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  };

  return <Bar data={data} options={options} />;
};

export default BarChart;

3. 차트 컴포넌트 사용하기

이제 BarChart 컴포넌트를 앱의 다른 부분에서 불러와서 사용할 수 있습니다. 예를 들어, App.js 파일에 다음과 같이 추가할 수 있습니다

import React from 'react';
import BarChart from './components/BarChart';

function App() {
  return (
    <div>
      <h2>My First Bar Chart</h2>
      <BarChart />
    </div>
  );
}

export default App;

4. 차트 커스터마이징하기

Chart.js와 react-chartjs-2는 다양한 옵션을 제공하여 차트를 커스터마이징할 수 있습니다. 예를 들어, options 객체를 수정하여 축의 타이틀을 추가하거나, datasets에 새 속성을 추가하여 툴팁의 스타일을 변경할 수 있습니다. 공식 문서에서 제공하는 다양한 구성 옵션을 참조하여 차트를 원하는 대로 조정할 수 있습니다.

저는 커서를 올리면 포인터로 바꾸고 링크를 줬습니다

    let [link, setLink] = useState(list.map((v) => `/detail/${v.id}`));


 const options = {
        scales: {
            y: {
                beginAtZero: true,
            },
            x: {
                ticks: {
                    maxRotation: 50, // 이 부분을 조정하여 레이블의 기울기를 제어
                    autoSkip: true
                }
            }
        },
        onClick: (e, element) => {
            if (element.length > 0) {
                const index = element[0].index;
                // 예시 URL 배열, 실제 데이터에 맞게 조정 필요
                const urls = link;
                navigate(urls[index]);

            }

        },
        onHover: (event, chartElement) => {
            const target = event.native ? event.native.target : event.target;
            target.style.cursor = chartElement[0] ? 'pointer' : 'default';
        }
    };