Kategorien

← View All Tools

Flussdiagramm Generator

Glatte Flussdiagramme zur Visualisierung von Zeitreihen-Datenflüssen generieren, perfekt zur Darstellung von Kompositionsänderungen über Zeit mit organischen, fließenden Formen

Zeitreihen-Daten für das Flussdiagramm. Jede Serie stellt eine fließende Schicht über die Zeit dar.

Titel, der über dem Diagramm angezeigt wird

Benutzerdefinierte Farben für Flüsse (Komma-getrennte Hex-Farben). Überschreibt Farbschema, falls bereitgestellt.

Opazität der Flussschichten (0.1 bis 1.0)

Glattheit der Flusskurven (0.1 bis 1.0, höher = glatter)

Hintergrundfarbe für den Diagramm-Container

Farbe für die Rasterlinien

Höhe des Diagramms in Pixeln

Maximalwert für Y-Achse (leer lassen für Auto-Skalierung)

Minimalwert für Y-Achse

Beschriftung für die X-Achse (typischerweise Zeit)

Beschriftung für die Y-Achse

Rasterlinien für bessere Lesbarkeit anzeigen

Werte innerhalb der Flussschichten anzeigen

Datenbeschriftungen an Schlüsselpunkten anzeigen

Werte in Prozente umwandeln, die relative Beitrag über Zeit zeigen

Legende unter dem Diagramm anzeigen

Wichtige Fakten

Kategorie
Data Visualization
Eingabetypen
textarea, text, select, number, color, checkbox
Ausgabetyp
html
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Der Flussdiagramm Generator erstellt glatte, organische Diagramme zur Visualisierung von Zeitreihen-Datenflüssen. Ideal, um Kompositionsänderungen über die Zeit darzustellen, wie z.B. Marktanteile oder Nutzerströme, mit anpassbaren Farben und Glättungsoptionen.

Wann verwenden

  • •Wenn Sie Zeitreihen-Daten mit mehreren Serien visualisieren möchten, um Trends zu erkennen.
  • •Um die relative Zusammensetzung von Daten über die Zeit ästhetisch ansprechend zu zeigen.
  • •Für Berichte oder Präsentationen, die fließende, organische Formen statt eckiger Diagramme erfordern.

So funktioniert es

  • •Geben Sie Ihre Zeitreihen-Daten im JSON-Format ein, mit 'labels' für Zeitpunkte und 'series' für Datenreihen.
  • •Passen Sie Optionen wie Farbschema, Opazität, Kurvenglättung und Achsenbeschriftungen an.
  • •Generieren Sie das Diagramm als HTML, das Sie herunterladen, einbetten oder weiterverarbeiten können.

Anwendungsfälle

Analyse des Website-Traffics nach Gerätetyp (Desktop, Mobile, Tablet) über mehrere Monate.
Darstellung von Marktanteilsänderungen in einer Branche über Quartale oder Jahre.
Visualisierung von Energieverbrauchsströmen in einem Smart Grid oder Produktionsprozess.

Beispiele

1. Website-Traffic-Überblick

Hintergrund
Ein Webmaster hat monatliche Traffic-Daten für Desktop, Mobile und Tablet aus Analytics exportiert.
Problem
Die Daten sollen visuell zeigen, wie sich die Anteile über ein Jahr entwickeln, ohne manuelle Diagramme zu erstellen.
Verwendung
JSON-Daten mit Monaten als Labels und Traffic-Zahlen als Serien vorbereiten, dann im Tool eingeben und ein Farbschema wie 'Sonnenuntergang' wählen.
Ergebnis
Ein glattes Flussdiagramm visualisiert die Veränderung der Traffic-Anteile, mit warmen Farben für bessere Lesbarkeit.

2. Marktanteils-Trends

Hintergrund
Ein Analyst muss die Marktanteile von drei Automarken über die letzten fünf Jahre darstellen.
Problem
Komplexe Daten erfordern eine klare, ästhetische Visualisierung, um Trends und Verschiebungen hervorzuheben.
Verwendung
Daten in JSON umwandeln, 'Kurvenglättung' auf 0.8 setzen und 'Auf 100% normalisieren' aktivieren, um relative Beiträge zu zeigen.
Ergebnis
Ein normiertes Flussdiagramm mit organischen Formen, das prozentuale Veränderungen über die Zeit deutlich macht.

Mit Samples testen

data-visualization
Grafana Fortgeschrittene Anwendungsbeispiele
Umfassende Grafana-Beispiele für fortgeschrittenes Dashboard-Design, Alerting-Konfiguration, Datenquellen-Integration und Plugin-Entwicklung
keywords time,series,data
sample
Chart.js Library Beispiele
Umfassende Chart.js-beispiele einschließlich diagrammtypen, anpassungsoptionen, animationen und responsive designs
keywords graph,chart,data
sample
WebRTC Echtzeitkommunikation Beispiele
Umfassende WebRTC-Beispiele für P2P Audio/Video-Kommunikation, Datenkanäle, Bildschirmfreigabe und Signalisierungsserver
keywords time,data
sample
Server-Sent Events (SSE)
Server-Sent Events Beispiele für unidirektionale Echtzeitkommunikation von Server zu Client, einschließlich Live-Updates, Benachrichtigungen und Daten-Streaming
keywords stream,time,data
sample

Verwandte Hubs

Json-Generate-Tools
Entdecken Sie 33 json-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.
Design-Generate-Tools
Entdecken Sie 19 design-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.
Pdf-Generate-Tools
Entdecken Sie 10 pdf-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.
Audio-Generate-Tools
Entdecken Sie 8 audio-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.

FAQ

Welches Datenformat wird für die Eingabe benötigt?

JSON mit 'labels' (Array von Zeitbezeichnungen) und 'series' (Array von Objekten mit 'name' und 'data').

Kann ich eigene Farben für die Flüsse festlegen?

Ja, über die Option 'Benutzerdefinierte Farben' mit kommagetrennten Hex-Codes oder durch Auswahl eines vordefinierten Farbschemas.

Wie kann ich die Glättung der Kurven anpassen?

Nutzen Sie den Schieberegler 'Kurvenglättung' – ein höherer Wert macht die Kurven glatter und organischer.

Ist das generierte Diagramm responsiv?

Das HTML-Diagramm kann in responsive Webseiten eingebettet werden, und die Höhe ist anpassbar.

Kann ich Werte direkt auf den Flüssen anzeigen?

Ja, aktivieren Sie die Option 'Werte auf Flüssen anzeigen', um Datenwerte innerhalb der Schichten darzustellen.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/stream-graph

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
chartData textarea Ja Zeitreihen-Daten für das Flussdiagramm. Jede Serie stellt eine fließende Schicht über die Zeit dar.
chartTitle text Nein Titel, der über dem Diagramm angezeigt wird
colorScheme select Nein -
streamColors text Nein Benutzerdefinierte Farben für Flüsse (Komma-getrennte Hex-Farben). Überschreibt Farbschema, falls bereitgestellt.
streamOpacity number Nein Opazität der Flussschichten (0.1 bis 1.0)
curveSmoothness number Nein Glattheit der Flusskurven (0.1 bis 1.0, höher = glatter)
backgroundColor color Nein Hintergrundfarbe für den Diagramm-Container
gridColor color Nein Farbe für die Rasterlinien
chartHeight number Nein Höhe des Diagramms in Pixeln
maxValue number Nein Maximalwert für Y-Achse (leer lassen für Auto-Skalierung)
minValue number Nein Minimalwert für Y-Achse
xAxisLabel text Nein Beschriftung für die X-Achse (typischerweise Zeit)
yAxisLabel text Nein Beschriftung für die Y-Achse
showGrid checkbox Nein Rasterlinien für bessere Lesbarkeit anzeigen
showValues checkbox Nein Werte innerhalb der Flussschichten anzeigen
showDataLabels checkbox Nein Datenbeschriftungen an Schlüsselpunkten anzeigen
normalizeData checkbox Nein Werte in Prozente umwandeln, die relative Beitrag über Zeit zeigen
showLegend checkbox Nein Legende unter dem Diagramm anzeigen

Antwortformat

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-stream-graph": {
      "name": "stream-graph",
      "description": "Glatte Flussdiagramme zur Visualisierung von Zeitreihen-Datenflüssen generieren, perfekt zur Darstellung von Kompositionsänderungen über Zeit mit organischen, fließenden Formen",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stream-graph",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]