React로 차트 Recharts 만들기

전제 조건

리액트로 도표를 만들다.
사용할 프로그램 라이브러리는 Recharts입니다.
이번에 떡그림을 만들다.

라이브러리 가져오기

설치recharts.$ npm install recharts설치 후 떡그림을 만드는 데 필요한 방법을 가져옵니다.

import { PieChart, Pie, Text } from 'recharts'

원형 차트 생성하기

도표 제작은 데이터가 있으면 최소한으로 할 수 있다.
데이터는 구조적 배열 형식으로 준비되어 있다.여기도 index를 가져가세요.

const data = [
      {
        index: 0,
        name: 'データ1',
        value: 300,
      },
      {
        index: 1,
        name: 'データ2',
        value: 200,
      },
      {
        index: 2,
        name: 'データ3',
        value: 380,
      },
      {
        index: 3,
        name: 'データ3',
        value: 80,
      },
      {
        index: 4,
        name: 'データ4',
        value: 40,
      }
    ]

이후 데이터를 떡그림에 전송하는 방법만 있으면 된다.

<PieChart width={730} height={250}>
  <Pie data={data} dataKey="value" cx="50%" cy="50%" outerRadius={100} fill="#82ca9d" label/>
</PieChart>

최소한의 도표 제작이 완료되었습니다.
이렇게 되면 실제 활용은 적합하지 않기 때문에 라벨 등을 갱신해야 한다.

<Pie> 매개변수 정보

data

도표 데이터

cx、cy

<PieChart>에 확인된 차트 표시 영역의 위치입니다.cx="100"시 표시된 구역의 오른쪽을 떡그림의 중앙으로 도표를 생성합니다.

outerRadius

선택기의 외반경
innerRadius와 함께 설정하면 도넛 모양의 떡그림도 만들 수 있습니다.

fill

색 코드를 지정하고 도표의 색을 지정합니다.

태그 표시 사용자 정의

<PieChart>에서 차트의 표시 크기를 확인합니다.

태그에 정보 추가

가까스로 data에 포함name했기 때문에 라벨에 표시name했다.label 속성도 원소원소원소를 전달할 수 있기 때문에 표시name와 value의 라벨원소를 만들 수 있습니다.

const label = ({ name, value, cx, x, y }) => {
      return (
        <>
	  {/* 引数で付属情報を受け取れます */}
          <Text x={x} y={y} fill="#82ca9d">{name}</Text>
          <Text x={x} y={y} dominantBaseline="hanging" fill="#82ca9d">{value}</Text>
        </>
      )
    }
...
<PieChart width={730} height={250}>
  <Pie data={data} dataKey="value" cx="50%" cy="50%" outerRadius={100} fill="#82ca9d" label={label}/>
</PieChart>

이름표만 배열<Text>하면 문자가 중첩되기 때문에 속성dominantBaseline="hanging" 아래에 정보를 수직 방향으로 설정합니다.
이렇게 하면 탭 표시는 항상 왼쪽에서 오른쪽으로 배열되기 때문에 좌표에 따라 오른쪽에서 왼쪽으로 문자를 표시해야 한다.

위치 정보에 따라 표시 변경

label 함수 수신cx은 도표의 중앙 x 좌표이다.
즉, 라벨x座標이 도표 중심의 x 좌표x > cx보다 크면 라벨은 도표 오른쪽에 위치한다.textAnchor 렌더링 위치를 지정하는 변수를 준비합니다.

const textAnchor = x > cx ? "start" : "end";

가격을 그대로 <Text>의textAnchro 속성에 맡긴다.

return (
      <>
        <Text x={x} y={y} textAnchor={textAnchor} fill="#82ca9d">
          {name}
        </Text>
        <Text
          x={x}
          y={y}
          dominantBaseline="hanging"
          textAnchor={textAnchor}
          fill="#82ca9d"
        >
          {value}
        </Text>
      </>
    );
  };

총결산

다음 차트가 완성됐습니까?

사실상, 서로 인접한 데이터가 비교적 작은 데이터 사이에는 때때로 라벨이 덮어쓰일 수도 있다.
이런 경우는 상당히 수학적인 해결책인데 필요하면 다음에 소개하고 싶어요.
(서명, 여현, 정절 등을 사용하여 기분을 좋게 할 수 있다.)Recharts React를 지원하며 상당히 사용하기 쉬운 그래프 라이브러리입니다.
물론 다른 스트라이프와 접선도도 지원해 다양한 용도로 활용할 수 있다.
하지만 비맞춤형 방식으로 사용할 수 있는 경우는 드물다고 생각합니다.
손쉬운 해결책이 있으면 좋겠지만 상당히 세밀한 계산을 거쳐 문제를 회피해야 하는 경우도 있다.(이곳은 힘을 과시하는 곳)
이 일대의 맞춤형 활용이 쉬운 그래프 라이브러리가 있다면 다시 한 번 소개하고 싶습니다.
이런 게 있어요!당신의 목소리를 기다립니다.