React 개발 가이드

npm install realchart

import { useEffect, useRef, useState } from "react";
import RealChart from "realchart";
 
const RealChartComponent = () => {
  const isMounted = useRef(false);  // 컴포넌트가 처음 마운트되는지 확인
  const [chart, setChart] = useState(null);  // chart 상태 관리
  const chartRef = useRef(null);  // 차트를 렌더링할 DOM 요소 참조
 
  // 차트 설정 구성
  const config = {
    title: '경기도 성남시 인구 현황',
    legend: true,
    xAxis: {
      title: '수정구',
      grid: true,
    },
    yAxis: {
      title: '전체 인구수',
    },
    series: {
      pointLabel: {
        visible: true,
        effect: 'outline', 
        style: {},
      },
      data: [
        ['신흥1동', 12904],
        ['신흥2동', 19796],
        ['신흥3동', 10995],
        ['태평1동', 14625],
        ['태평2동', 14627],
        ['태평3동', 12649],
        ['태평4동', 12279],
      ],
      data2: [
        [1, 7],
        [2, 11],
        [3, 9],
        [4, 10],
        [5, 14.3],
        [6, 13],
        [7, 12.5],
      ],
    },
  };
 
  useEffect(() => {
    if (!isMounted.current) {
      const realChart = RealChart.createChart(document, chartRef.current, config);  // 차트 생성
      setChart(realChart);  // 생성된 차트 설정
      isMounted.current = true;  // 컴포넌트가 마운트되었음을 표시
    }
 
    return () => {
      if (chart) {
        chart.destroy();  // 컴포넌트가 언마운트될 때 차트 제거
      }
    };
  }, [chart, config]);
 
  return (
    <div
      id="realchart"
      ref={chartRef}
      style={{
        width: "850px",
        height: "550px",
      }}
    ></div>
  );
};
 
export default RealChartComponent;