Vanilla JS 임베딩

Graphic Walker는 React 코드를 작성하지 않고도 모든 컴포넌트를 사용할 수 있는 embed* 함수를 제공합니다. 이 함수들은 DOM 요소에 직접 컴포넌트를 렌더링합니다.

import {
  embedGraphicWalker,
  embedGraphicRenderer,
  embedPureRenderer,
  embedTableWalker,
} from '@kanaries/graphic-walker';

함수

embedGraphicWalker

DOM 요소에 전체 GraphicWalker 인스턴스를 렌더링합니다.

embedGraphicWalker(element: HTMLElement, props?: ILocalVizAppProps | IRemoteVizAppProps | IGWProps): void

data와 fields를 전달하면 데이터 바인딩 모드로 렌더링됩니다. 데이터 props 없이 전달하면 사용자가 CSV 파일을 업로드할 수 있는 내장 데이터 소스 관리자로 렌더링됩니다.

embedGraphicRenderer

GraphicRenderer 인스턴스를 렌더링합니다.

embedGraphicRenderer(element: HTMLElement, props?: ILocalVizAppProps | IRemoteVizAppProps): void

embedPureRenderer

PureRenderer 인스턴스를 렌더링합니다.

embedPureRenderer(element: HTMLElement, props: ILocalPureRendererProps | IRemotePureRendererProps): void

embedTableWalker

TableWalker 인스턴스를 렌더링합니다.

embedTableWalker(element: HTMLElement, props?: ILocalTableProps | IRemoteTableProps): void

번들러와 함께 사용하기

import { embedGraphicWalker } from '@kanaries/graphic-walker';
 
const data = [
  { city: 'New York', population: 8336817, area: 302.6 },
  { city: 'Los Angeles', population: 3979576, area: 468.7 },
  { city: 'Chicago', population: 2693976, area: 227.3 },
];
 
const fields = [
  { fid: 'city', name: 'City', semanticType: 'nominal', analyticType: 'dimension' },
  { fid: 'population', name: 'Population', semanticType: 'quantitative', analyticType: 'measure' },
  { fid: 'area', name: 'Area (sq mi)', semanticType: 'quantitative', analyticType: 'measure' },
];
 
embedGraphicWalker(document.getElementById('app'), {
  data,
  fields,
  appearance: 'media',
});

CDN을 통한 사용

빠른 프로토타입이나 정적 페이지를 위해 CDN을 통해 Graphic Walker를 로드할 수 있습니다. UMD 빌드를 사용하세요:

<!DOCTYPE html>
<html>
<head>
  <title>Graphic Walker</title>
  <script src="https://unpkg.com/@kanaries/graphic-walker/dist/umd/graphic-walker.umd.js"></script>
</head>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>
  <script>
    const data = [
      { product: 'Widget', q1: 100, q2: 150, q3: 130, q4: 200 },
      { product: 'Gadget', q1: 200, q2: 180, q3: 220, q4: 250 },
    ];
 
    const fields = [
      { fid: 'product', name: 'Product', semanticType: 'nominal', analyticType: 'dimension' },
      { fid: 'q1', name: 'Q1 Sales', semanticType: 'quantitative', analyticType: 'measure' },
      { fid: 'q2', name: 'Q2 Sales', semanticType: 'quantitative', analyticType: 'measure' },
      { fid: 'q3', name: 'Q3 Sales', semanticType: 'quantitative', analyticType: 'measure' },
      { fid: 'q4', name: 'Q4 Sales', semanticType: 'quantitative', analyticType: 'measure' },
    ];
 
    GraphicWalker.embedGraphicWalker(document.getElementById('app'), {
      data,
      fields,
    });
  </script>
</body>
</html>

데이터 없이 사용 (파일 업로드 모드)

data나 fields 없이 embedGraphicWalker를 호출하면 내장 데이터 소스 관리자를 포함한 전체 경험이 렌더링됩니다. 사용자는 CSV 파일을 업로드하고, 데이터셋을 관리하며, 시각화를 생성할 수 있습니다.

embedGraphicWalker(document.getElementById('app'));

프레임워크 통합 참고 사항

이 임베딩 함수들은 모든 프레임워크 -- Vue, Svelte, Angular 또는 일반 HTML에서 동작합니다. 라이프사이클 훅에서 마운트하세요:

Vue 3:

<template>
  <div ref="gwContainer" style="width: 100%; height: 600px" />
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import { embedGraphicWalker } from '@kanaries/graphic-walker';
 
const gwContainer = ref(null);
 
onMounted(() => {
  embedGraphicWalker(gwContainer.value, { data, fields });
});
</script>

Svelte:

<script>
  import { onMount } from 'svelte';
  import { embedGraphicWalker } from '@kanaries/graphic-walker';
 
  let container;
 
  onMount(() => {
    embedGraphicWalker(container, { data, fields });
  });
</script>
 
<div bind:this={container} style="width: 100%; height: 600px;" />

타입 및 인터페이스 차트 유형