[javascript] Recharts에서 차트의 각 데이터 포인트에 대한 고유한 라벨을 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

다음은 Recharts에서 각 데이터 포인트에 고유한 라벨을 표시하는 예시입니다:

import React from 'react';
import { LineChart, Line, XAxis, YAxis, Tooltip, Label } from 'recharts';

const data = [
  { month: 'Jan', value: 400 },
  { month: 'Feb', value: 300 },
  { month: 'Mar', value: 200 },
  { month: 'Apr', value: 500 },
  { month: 'May', value: 600 },
];

const CustomizedLabel = ({ x, y, value }) => (
  <text x={x} y={y} dy={-10} fill="#8884d8" fontSize={12} textAnchor="middle">{value}</text>
);

const App = () => (
  <LineChart width={500} height={300} data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip />
    <Line type="monotone" dataKey="value" stroke="#8884d8" label={<CustomizedLabel />} />
  </LineChart>
);

export default App;

위의 예시에서는 LineChart 컴포넌트를 사용하여 데이터를 선형 차트로 표시합니다. 그리고 데이터 포인트에 Label 컴포넌트를 사용하여 각 데이터 포인트에 텍스트 라벨을 표시합니다. CustomizedLabel 컴포넌트는 각 데이터 포인트의 값을 받아와 텍스트로 표시하는 역할을 합니다.

이렇게하면 각 데이터 포인트에 고유한 라벨이 표시되는 Recharts 차트를 만들 수 있습니다. 차트의 데이터에 따라 라벨을 동적으로 업데이트하는 방법도 있으므로 필요에 따라 커스터마이즈할 수 있습니다. Recharts에서 제공하는 다양한 컴포넌트와 속성을 사용하여 원하는 시각화를 만들어보세요.