[javascript] Recharts에서 차트의 범례를 클릭하거나 토글하는 방법은 무엇인가요?

01 Dec 2023

javascript

다음은 Recharts에서 범례를 클릭하여 차트를 토글하는 예제 코드입니다:

import React, { useState } from "react";
import { LineChart, Legend, Line, CartesianGrid, XAxis, YAxis } from "recharts";

const ChartExample = () => {
  const [data, setData] = useState([
    { name: "A", value: 100 },
    { name: "B", value: 200 },
    { name: "C", value: 150 }
  ]);
  const [legendState, setLegendState] = useState({
    A: true,
    B: true,
    C: true
  });

  const toggleLegend = (name) => {
    setLegendState((prevState) => ({
      ...prevState,
      [name]: !prevState[name]
    }));
  };

  const filteredData = data.filter((item) => legendState[item.name]);

  return (
    <LineChart width={400} height={300} data={filteredData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Legend onClick={toggleLegend} />
      {Object.keys(legendState).map((name) => (
        <Line
          key={name}
          type="monotone"
          dataKey="value"
          data={data}
          name={name}
          stroke={legendState[name] ? "#8884d8" : "#eee"}
          activeDot={{ r: 8 }}
          dot={false}
        />
      ))}
    </LineChart>
  );
}

export default ChartExample;

이 코드에서는 toggleLegend 함수를 생성하여 범례의 상태를 업데이트합니다. 이 함수는 onClick 이벤트에서 호출되며, 클릭된 범례의 상태를 반전시킵니다. 그런 다음 filteredData 배열을 생성하여 표시할 데이터만 필터링합니다. 마지막으로, filteredData를 사용하여 Line 컴포넌트만 렌더링하고, 활성 상태에 따라 색상을 변경합니다.

이 예제 코드를 사용하여 Recharts에서 차트의 범례를 클릭하거나 토글할 수 있습니다.