FAQ

Allgemein

Was ist Graphic Walker?

Graphic Walker ist eine Open-Source React-Komponente fuer interaktive Datenvisualisierung. Es bietet eine Tableau-aehnliche Drag-and-Drop-Oberflaeche zum Erstellen von Diagrammen, basierend auf einem Grammar-of-Graphics-Ansatz. Im Gegensatz zu herkoemmlichen BI-Plattformen wird es direkt in Ihre React- (oder jede andere Web-) Anwendung eingebettet.

Welche Lizenz verwendet Graphic Walker?

Graphic Walker wird unter der Apache-2.0-Lizenz (opens in a new tab) veroeffentlicht.

Welche Browser werden unterstuetzt?

Graphic Walker funktioniert in allen modernen Browsern: Chrome, Firefox, Safari und Edge (jeweils die letzten zwei Versionen). Internet Explorer wird nicht unterstuetzt.

Wie gross ist das Bundle?

Das @kanaries/graphic-walker-Paket ist ungefaehr 1,5 MB minifiziert (einschliesslich der Vega-Lite-Rendering-Engine). Mit Gzip-Komprimierung betraegt die Uebertragungsgroesse etwa 400 KB.

Kann ich Graphic Walker ohne React verwenden?

Ja. Das Paket exportiert die Funktionen embedGraphicWalker, embedGraphicRenderer, embedPureRenderer und embedTableWalker, die Komponenten in jedes DOM-Element einbinden. Siehe die Dokumentation zur Vanilla JS-Einbettung.

Daten

Wie viele Daten kann Graphic Walker verarbeiten?

Im clientseitigen Modus (Uebergabe der data-Prop) haengt die Leistung vom Browserspeicher ab. Als Orientierung:

Fuer grosse Datensaetze verwenden Sie die computation-Prop, um die Verarbeitung an Ihren Server zu delegieren.

Welche Datenformate werden unterstuetzt?

Graphic Walker akzeptiert Daten als Array von JavaScript-Objekten (Record<string, any>[]). Sie koennen aus jedem Format konvertieren:

• CSV: Verwenden Sie Papa Parse (opens in a new tab) oder den integrierten Datei-Upload
• JSON: Direkt parsen
• Datenbank: Fragen Sie Ihre Datenbank ab und uebergeben Sie die Ergebnisse an die computation-Prop
• API: Daten abrufen und an die data-Prop uebergeben

Kann ich eine direkte Datenbankverbindung herstellen?

Nicht direkt aus der Browser-Komponente. Verwenden Sie den serverseitigen Berechnungsmodus: Implementieren Sie eine computation-Funktion, die Ihre Datenbank abfragt und Ergebnisse zurueckgibt. Siehe die Berechnungs-Anleitung.

Rendering

Unterstuetzt Graphic Walker SSR (Server-Side Rendering)?

Graphic Walker benoetigt eine Browser-Umgebung zum Rendern. In SSR-Frameworks wie Next.js verwenden Sie dynamische Imports mit ssr: false:

import dynamic from 'next/dynamic';
 
const GraphicWalker = dynamic(
  () => import('@kanaries/graphic-walker').then(m => m.GraphicWalker),
  { ssr: false }
);

Kann ich SVG statt Canvas zum Rendern verwenden?

Ja. Setzen Sie useSvg: true in der Layout-Konfiguration oder der defaultConfig-Prop:

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: { useSvg: true },
  }}
/>

SVG-Rendering erzeugt schaerfere Ausgaben, kann aber bei grossen Datensaetzen langsamer sein.

Wie lege ich eine feste Diagrammgroesse fest?

Verwenden Sie die defaultConfig-Prop:

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: {
      size: { mode: 'fixed', width: 800, height: 600 },
    },
  }}
/>

Anpassung

Kann ich Teile der Benutzeroberflaeche ausblenden?

Ja. Verwenden Sie diese Props zur Steuerung der UI-Sichtbarkeit:

Wie speichere und stelle ich Diagrammkonfigurationen wieder her?

Die chart-Prop akzeptiert IChart[] -- ein Array von Diagrammspezifikationen. Speichern Sie dieses Array in Ihrem Backend oder localStorage und uebergeben Sie es zurueck, um den Zustand wiederherzustellen:

// Save
const charts = storeRef.current?.exportAllCharts();
localStorage.setItem('gw-charts', JSON.stringify(charts));
 
// Restore
const saved = JSON.parse(localStorage.getItem('gw-charts') || '[]');
<GraphicWalker data={data} fields={fields} chart={saved} />

Fehlerbehebung

Diagramme werden nicht gerendert -- weisser leerer Bereich

Haeufige Ursachen:

1. Fehlende Daten: Stellen Sie sicher, dass data ein nicht-leeres Array ist
2. Fehlende Felder: Stellen Sie sicher, dass das fields-Array mit den Schluesseln in Ihren Daten uebereinstimmt
3. SSR-Problem: Bei Verwendung von Next.js importieren Sie mit ssr: false (siehe oben)
4. Container-Groesse: Das uebergeordnete Element muss eine definierte Hoehe haben

"Field not found"-Fehler

Stellen Sie sicher, dass die fid-Werte in Ihrem fields-Array exakt mit den Eigenschaftsnamen in Ihren Datenobjekten uebereinstimmen. Feld-IDs sind gross-/kleinschreibungssensitiv.

Dark Mode funktioniert nicht

Stellen Sie sicher, dass Sie die appearance-Prop verwenden (nicht die veraltete dark-Prop):

<GraphicWalker appearance="dark" data={data} fields={fields} />

Leistung ist langsam

• Reduzieren Sie die Datensatzgroesse oder wechseln Sie zur serverseitigen Berechnung
• Deaktivieren Sie Profiling mit hideProfiling={true}
• Verwenden Sie Canvas-Rendering (Standard) anstelle von SVG