RealChart Vue

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

설치

npm install realchart-vue

또는

yarn add realchart-vue

사용법

기본 사용 예제

<template>
  <RealChartVue
    :realchart="realchart"
    :config="chartConfig"
  />
</template>

<script setup lang="ts">
import * as realchart from 'realchart';
import { RealChartVue } from 'realchart-vue';

const chartConfig = {
    title: '카테고리별 판매량',
    xAxis: {
        categories: ['식품', '전자제품', '의류'],
    },
    series: {
        type: 'bar',
        xField: 'category',
        yField: 'quantity',
        data: [
            { category: '식품', quantity: 120 },
            { category: '전자제품', quantity: 80 },
            { category: '의류', quantity: 50 },
        ],
    },
};
</script>

컴포넌트 설명

props

| Prop | 타입 | 설명 | 필수 여부 | |-----------------|---------------------------------|----------------------------------------|-----------| | realchart | typeof RealChart | RealChart 모듈 | ✅ | | config | ChartConfiguration | 차트 구성 옵션 | ✅ | | id | string | 차트 DOM ID (기본값: "realchart") | ❌ | | w | string | 차트 width (기본값: "100%") | ❌ | | h | string | 차트 height (기본값: "100%") | ❌ | | animate | boolean | 애니메이션 사용 여부 (기본값: true) | ❌ | | onChartLoaded | (args: LoadCallbackArgs) => void | 차트 로드 후 호출되는 콜백 | ❌ |

RealChartVueRef

ref를 사용해 RealChart 인스턴스에 접근할 수 있습니다.

export interface RealChartVueRef {
  realchart: Ref<Chart | null>
}

라이선스

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

관련 링크

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

문의

• [email protected]