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: '연도별 서울시 평균 대기질 지수',
        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)

문의

• [email protected]