React 개발 가이드
RealChart는 React 환경에서 쉽게 사용할 수 있도록 Wrapper 라이브러리 (opens in a new tab)를 제공한다.
props를 통해 차트의 config 및 차트 컨테이너의 속성을 설정할 수 있다. 또한 ref를 통해 직접 차트 인스턴스에 접근하여 API를 사용할 수 있다.
설치 방법
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는 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: '업데이트된 타이틀' });