Skip to content

Vanilla JS-Einbettung

Graphic Walker stellt embed*-Funktionen bereit, mit denen Sie alle Komponenten verwenden koennen, ohne React-Code zu schreiben. Diese Funktionen rendern Komponenten direkt in ein DOM-Element.

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

Funktionen

embedGraphicWalker

Rendert eine vollstaendige GraphicWalker-Instanz in ein DOM-Element.

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

Wenn Sie data und fields uebergeben, wird im datengebundenen Modus gerendert. Wenn Sie keine Daten-Props uebergeben, wird mit einem integrierten Datenquellenmanager gerendert, in dem Benutzer CSV-Dateien hochladen koennen.

embedGraphicRenderer

Rendert eine GraphicRenderer-Instanz.

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

embedPureRenderer

Rendert eine PureRenderer-Instanz.

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

embedTableWalker

Rendert eine TableWalker-Instanz.

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

Verwendung mit Bundlern

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',
});

Verwendung ueber CDN

Sie koennen Graphic Walker ueber ein CDN fuer schnelle Prototypen oder statische Seiten laden. Verwenden Sie den UMD-Build:

<!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>

Ohne Daten (Datei-Upload-Modus)

Wenn Sie embedGraphicWalker ohne data oder fields aufrufen, wird die vollstaendige Erfahrung mit einem integrierten Datenquellenmanager gerendert. Benutzer koennen CSV-Dateien hochladen, Datensaetze verwalten und Visualisierungen erstellen.

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

Hinweise zur Framework-Integration

Diese Einbettungsfunktionen funktionieren mit jedem Framework -- Vue, Svelte, Angular oder reinem HTML. Binden Sie sie in einem Lifecycle-Hook ein:

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;" />