[javascript] Recharts에서 차트의 특정 데이터 시리즈를 선택하여 강조하는 방법은 무엇인가요?

01 Dec 2023

javascript

차트 데이터 설정: 첫째, 차트에 표시할 데이터를 설정해야 합니다. 예를 들어, 다음과 같은 데이터를 가지는 배열을 생성합니다.

const data = [
  { month: 'Jan', value: 100 },
  { month: 'Feb', value: 200 },
  { month: 'Mar', value: 150 },
  // ...
];

Recharts 차트 컴포넌트 사용: 다음으로, Recharts에서 제공하는 차트 컴포넌트를 사용하여 그래프를 생성합니다. 예를 들어, LineChart 컴포넌트를 사용하여 간단한 선 그래프를 생성할 수 있습니다.

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const Chart = () => (
  <LineChart width={400} height={300} data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
    <Tooltip />
    <Legend />
    <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} />
  </LineChart>
);

특정 데이터 시리즈 강조: 특정 데이터 시리즈를 강조하기 위해, 해당 데이터를 다른색으로 표시하거나 효과를 추가할 수 있습니다. 예를 들어, Line 컴포넌트의 stroke prop을 조절하여 특정 데이터 시리즈의 선 색상을 변경할 수 있습니다.

<Line type="monotone" dataKey="value" stroke={highlighted ? '#ff0000' : '#8884d8'} strokeWidth={2} />

또는 strokeDasharray prop을 사용하여 선의 형태를 변경할 수도 있습니다.

<Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} strokeDasharray={highlighted ? '5 5' : null} />

위의 예제는 LineChart를 사용한 간단한 차트 예시입니다. Recharts는 다양한 차트 타입과 기능을 제공하므로, 여러분의 요구에 맞게 커스터마이즈할 수 있습니다. 추가적인 사용법과 기능은 Recharts 공식 문서를 참고하시기 바랍니다.