realchart-vue

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

RealChartVueRef

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

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

라이선스

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

관련 링크

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

문의

• support@realgrid.com