RealChart React

RealChart React는 RealChart를
React에서 쉽게 사용할 수 있도록 제공하는 래퍼 컴포넌트입니다.

---

설치

npm install realchart-react

또는

yarn add realchart-react

---

사용법

기본 예제

import React, { useRef } from 'react';
import { RealChartReact, RealChartRef } from 'realchart-react';
import RealChart from 'realchart';

export default function App() {
    const chartRef = useRef<RealChartRef>(null);

    const config = {
        title: '연도별 서울시 평균 대기질 지수',
        options: {},
        xAxis: {
            title: '서울시',
            categories: ['`14', '`15', '`16', '`17', '`18', '`19'],
            grid: true
        },
        yAxis: {
            title: '대기질 지수<br><t style="fill:gray;font-size:0.9em;">(Air Quality Index, AQI)</t>',
            tick: true
        },
        series: [{
            name: '대기질',
            pointLabel: true,
            data: [155, 138, 122, 133, 114, 113]
        }]
    };

    return (
        <RealChartReact
            realchart={RealChart}
            config={config}
            w="600px"
            h="400px"
            onChartLoaded={({ chart }) => {
                console.log('차트가 생성되었습니다:', chart);
            }}
            ref={chartRef}
        />
    );
}

---

컴포넌트 설명

RealChartReact

RealChartReact는 realchart.createChart를 호출하여 DOM에 차트를 생성하고,
ref를 통해 차트 인스턴스를 외부로 노출합니다.

Props

Prop	Type	설명
realchart	typeof Realchart	외부에서 주입받는 RealChart 모듈
config	ChartConfiguration	차트 생성에 필요한 설정 객체
id	string	차트 DOM의 ID (기본값: "realchart")
w	React.CSSProperties['width']	차트의 가로 크기 (기본값: 100%)
h	React.CSSProperties['height']	차트의 세로 크기 (기본값: 100%)
animate	boolean	애니메이션 사용 여부
onChartLoaded	(args: Realchart.LoadCallbackArgs) => void	차트 생성 후 호출되는 콜백
...divProps	React.HTMLAttributes<HTMLDivElement>	기타 div 속성

---

RealChartRef

ref를 통해 차트 인스턴스에 접근할 수 있습니다.

export interface RealChartRef {
    realchart: Chart;
}

예제

chartRef.current?.realchart.setOption({ title: '업데이트된 타이틀' });

---

라이선스

RealChart는 라이선스 파일이 필요합니다.
자세한 내용은 https://support.realgrid.com/를 참고하세요.

---

관련 링크

• RealChart 공식 문서
• RealChart Core (realchart)

---

문의

• [e-mail]