[javascript] Recharts에서 차트의 축 라벨을 클릭하여 인라인 편집을 활성화하는 방법은 무엇인가요?

01 Dec 2023

javascript

그러나, Recharts를 사용하는 프로젝트에서 임의의 기능을 구현하여 축 라벨을 클릭하여 편집할 수는 있습니다. 이를 위해 다음과 같은 접근 방법을 사용할 수 있습니다:

Recharts에서 라벨을 클릭할 때 발생하는 이벤트를 감지합니다.
클릭된 라벨에 대한 인라인 입력 또는 편집 컴포넌트를 렌더링합니다.
사용자가 변경을 수행하면 해당 내용을 저장하고 그에 따라 그래프를 업데이트합니다.

이 접근 방법은 Recharts 라이브러리 자체의 기능은 아니지만, 사용자 정의 기능을 활용하여 축 라벨을 편집하는 것이 가능합니다. 이를 위해서는 React와 같은 JavaScript 라이브러리를 함께 사용하는 것이 좋습니다.

다음은 Recharts와 함께 사용자 정의 축 라벨 편집 기능을 구현한 예시입니다:

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

const CustomizedLabel = ({ x, y, text, onClick }) => {
  const [editing, setEditing] = useState(false);
  const [labelText, setLabelText] = useState(text);

  const handleLabelClick = () => {
    setEditing(true);
  };

  const handleInputChange = (e) => {
    setLabelText(e.target.value);
  };

  const handleInputBlur = () => {
    setEditing(false);
  };

  return (
    <g>
      <rect
        x={x}
        y={y}
        width={50}
        height={20}
        fill="#fff"
        stroke="#000"
        strokeWidth={1}
        onClick={handleLabelClick}
      />
      {editing ? (
        <foreignObject x={x} y={y} width={50} height={20}>
          <input
            type="text"
            value={labelText}
            onChange={handleInputChange}
            onBlur={handleInputBlur}
          />
        </foreignObject>
      ) : (
        <text x={x} y={y + 15} onClick={handleLabelClick}>
          {labelText}
        </text>
      )}
    </g>
  );
};

const Chart = () => {
  const data = [
    { name: 'A', value: 10 },
    { name: 'B', value: 20 },
    { name: 'C', value: 30 },
  ];

  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" tick={<CustomizedLabel />} />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
};

export default Chart;

이 예시는 Recharts의 LineChart 예제를 수정하여 X축 라벨을 클릭하여 인라인으로 편집할 수 있는 기능을 추가한 것입니다. CustomizedLabel 컴포넌트에서는 클릭 시 인라인 입력란을 보여주고, 입력 값이 변경되면 그에 따라 라벨을 업데이트합니다.

하지만, 이는 예시일 뿐 Recharts 라이브러리에 포함된 기능은 아니므로, 상황에 맞게 수정하여 사용하셔야 합니다.

참고 문서:

Recharts 공식 문서