[javascript] Recharts에서 누적된 그래프를 그리는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts는 누적된 그래프를 그리기 위해 AreaChart 컴포넌트와 Area 컴포넌트를 제공합니다. AreaChart 컴포넌트는 기본 차트 컨테이너이고, Area 컴포넌트는 실제로 누적된 그래프를 그리는 역할을 합니다.

아래는 Recharts를 사용하여 누적된 그래프를 그리는 예제입니다:

import React from 'react';
import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area } from 'recharts';

const data = [
  { name: 'A', value: 100 },
  { name: 'B', value: 200 },
  { name: 'C', value: 300 },
  { name: 'D', value: 400 },
];

const CumulativeChart = () => {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <AreaChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Area type="monotone" dataKey="value" stackId="1" stroke="#8884d8" fill="#8884d8" />
        {/* 추가적인 Area 컴포넌트를 사용하여 다른 데이터로 누적된 그래프를 그릴 수 있습니다 */}
      </AreaChart>
    </ResponsiveContainer>
  );
}

export default CumulativeChart;

위의 예제에서 Area 컴포넌트의 stackId 속성을 사용하여 데이터를 누적될 그래프에 연결합니다. 이를 통해 각 Area 컴포넌트가 동일한 stackId 값을 가지면 누적 그래프가 가능해집니다. 추가적으로, 다중 Area 컴포넌트를 사용하여 다른 데이터로 누적된 그래프를 그릴 수도 있습니다.

이렇게 Recharts를 사용하여 누적된 그래프를 그릴 수 있습니다. 문서를 참조하여 다양한 설정과 기능을 활용할 수 있습니다.