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を渡すと、データバインドモードでレンダリングされます。データプロパティを渡さない場合は、ユーザーが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;" />

型とインターフェースチャートタイプ