react-chartjs-2와 Chart.js를 사용하여 그래프를 만들어 보았습니다.

최근 React를 공부하고 있어 그 때에 그래프를 만들고 싶었습니다. react-chartjs-2의 제공도 되었기 때문에, 이번은 「Chart.js」를 사용하기로 했습니다.

이번은 선 그래프입니다만, 그 밖에도 원 그래프나 막대 그래프 등 여러가지 있습니다.
ぇtps : / / ぇ 등 st. 기주 b. 이오 / 레아 ct-chan rtjs-2 /
또한 자세한 도입법은 공식 문서에서 확인할 수 있습니다.
htps : // 기주 b. 코 m / 지 라 1

완성시의 이미지와 코드는 아래입니다.

필요한 "react-chartjs-2"와 "chart.js"설치

yarn add react-chartjs-2 chart.js

App.js

import React from "react";
import LineExample from './Line';

function App() {
  return (
    <div className='App'>
      <LineExample />
    </div>
  );
}

export default App;

Line.js

import React from 'react';
import {Line} from 'react-chartjs-2';

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First dataset',
      fill: true,
      lineTension: 0.1,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderCapStyle: 'round',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'square',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#eee',
      pointBorderWidth: 10,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 1,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [3, 10, 21, 31, 34, 40, 48]
    }
  ]
};

const LineExample = () => {
  return (
    <div>
      <h2>Line Example</h2>
      <Line data={data} />
    </div>
  );
}

export default LineExample;

위의 예에서는 하나의 선 그래프이었지만 여러 그래프를 표시하거나 디자인을 추가할 수 있습니다.

여러 그래프를 표시하는 방법을 몰랐을 때 참고가 된 stackoverflow도 함께 둡니다.
create a multi line chart using Chart.js

참고문헌
react-chartjs-2
react-chartjs-2의 github
create a multi line chart using Chart.js