🌐 언어
uPlot 래퍼
uPlot 래퍼 모음으로, 선호하는 프레임워크 내에서 차트를 선언적으로 사용할 수 있습니다.
목차
동기
다른 uPlot 래퍼들이 이미 여러 개 존재하지만, 모두 다음과 같은 한계를 가지고 있습니다:
- 컴포넌트 마운트 단계에서 한 번만 uPlot 인스턴스를 생성하고, 모든 업데이트 로직을 사용자가 직접 처리해야 합니다.
- props가 변경될 때마다 새로운 uPlot 인스턴스를 재생성하며, 인스턴스를 업데이트하여 변경사항을 반영할 수 있음에도 불구하고 항상 재생성합니다.
시작하기
사용하고 있는 프레임워크에 따라 React, Vue.js, Svelte 섹션을 참고하세요. 또한 모든 프레임워크에 공통적인 API 문서를 참고하세요.
React
설치
uplot-react 패키지와 uplot 의존성을 설치합니다:
- npm 사용:
$ npm install uplot-react uplot - yarn 사용:
$ yarn add uplot-react uplot
사용 방법
import React from 'react';
import uPlot from 'uplot';
import UplotReact from 'uplot-react';
import 'uplot/dist/uPlot.min.css';const Chart = () => (
{}} onDelete={(chart) => {}} />
);
데모
라이브 데모를 참조하세요.
로컬에서 데모 앱을 실행할 수도 있습니다:
$ git clone https://github.com/skalinichev/uplot-wrappers.git
$ cd uplot-wrappers && yarn install && yarn run serveReact
ReactJS 데모
빠르게 시작하기 위한 간단한 예제입니다. ReactJS 데모
Vue.js
설치
uplot 종속성과 함께 uplot-vue 패키지를 설치하세요:
- npm 사용:
$ npm install uplot-vue uplot - yarn 사용:
$ yarn add uplot-vue uplot
사용 방법
템플릿 사용법
JSX 사용하기
// Vue.js 2
import Vue from 'vue';
// Vue.js 3
import { createApp } from 'vue';
import uPlot from 'uplot';
import UplotVue from 'uplot-vue';
import 'uplot/dist/uPlot.min.css';{
...,
render() {
return (
{}}
onCreate={(chart) => {}}
/>
);
}
}
참고: Vue 제한사항으로 인해 변이(mutation)에 의한 속성 변경은 지원되지 않습니다. 속성의 복사본을 만들어 교체해야 하며, 일반적인 아이디어는 예제를 참조하세요.
데모
Vue.js 2 라이브 데모를 확인하세요.
로컬에서 데모 앱을 실행할 수도 있습니다:
$ git clone https://github.com/skalinichev/uplot-wrappers.git
$ cd uplot-wrappers && yarn install
Vue.js 2:
$ yarn run serveVue
Vue.js 3:
$ yarn run serveVue3
Svelte
설치
uplot 의존성과 함께 uplot-svelte 패키지를 설치하세요:
- npm 사용:
$ npm install uplot-svelte uplot - yarn 사용:
$ yarn add uplot-svelte uplot
사용 방법
데모
예제 보기 Svelte 예제
로컬에서 데모 앱을 실행할 수도 있습니다:
$ git clone https://github.com/skalinichev/uplot-wrappers.git
$ cd uplot-wrappers && yarn install && yarn run serveSvelte
문서
| 매개변수 | 필수 여부 | 설명 |
| :-------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| options | 필수 | uPlot의 옵션. uPlot 생성자의 첫 번째 인수로 전달: new uPlot(options) |
| data | 필수 | uPlot의 데이터. uPlot 생성자의 두 번째 인수로 전달: new uPlot(options, data) |
| target | 선택 | uPlot의 대상 HTML 요소. uPlot 생성자의 세 번째 인수로 전달: new uPlot(options, data, target) props에 전달되지 않으면 자동으로 새로운 div 대상 요소가 생성됩니다 |
| onCreate | 선택 | uPlot 인스턴스 생성 또는 재생성 시 호출되는 콜백 함수 |
| onDelete | 선택 | uPlot 인스턴스가 파괴되기 전에 호출되는 콜백 함수, props가 너무 많이 변경되어 차트를 업데이트할 수 없거나 컴포넌트가 마운트 해제되기 직전 |
| className/class | 선택 | 자동 생성된 대상 div 요소에 전달되는 클래스 이름. 'target' prop이 사용될 경우 클래스 이름은 무시됩니다 |
| resetScales | 선택 | 데이터 변경 시 스케일을 리셋할지 여부를 제어하는 플래그. 기본값은 true입니다. |
--- Tranlated By Open Ai Tx | Last indexed: 2025-09-25 ---