Diagramm-Blocks

Erstelle Balken-, Linien- oder Kreisdiagramme, um deinen Besuchern Daten in einem ansprechenden Format zu präsentieren.

Zuletzt aktualisiert: 23. August 2024

Verwenden Sie Diagramm-Blöcke, um Datenvisualisierungen auf Ihrer Website zu erstellen. Diagramme eignen sich hervorragend, um Beziehungen zwischen verschiedenen Datenreihen auf überzeugende Weise zu erklären. Sie können Balkendiagramme, Liniendiagramme und Kreisdiagramme erstellen und gestalten.

Diagramm-Blöcke sind eine gute Alternative zum Einbetten statischer Bilder von Diagrammen, die in Programmen außerhalb von Squarespace erstellt wurden. Die Größe der Diagramme wird entsprechend angepasst, um sicherzustellen, dass sie in mehreren Bildschirmgrößen gut aussehen, und du kannst die Daten jederzeit aktualisieren.

Tipp

In dieser Anleitung wird erläutert, wie du deiner Website Diagramme hinzufügst. Um eine Tabelle mit Spalten und Zeilen hinzuzufügen, kannst du benutzerdefinierten Code hinzufügen. Um mehr zu erfahren, besuche diesen Beitrag im Squarespace Forum.

Bitte beachte, dass benutzerdefinierte Code-Modifikationen nicht von unserem Support abgedeckt werden. Das bedeutet, dass wir keine Unterstützung bei der Einrichtung oder Fehlerbehebung codebasierter Lösungen bieten können.

Bevor du loslegst

Wir empfehlen, Daten in Form einer CSV-Datei in einem Tabellenkalkulationsprogramm wie Excel oder Google Tabellen vorzubereiten. Stelle sicher, dass die Spalten und Zeilen über Header verfügen, damit sie im Block als Header erkannt werden.

Einen Diagramm-Block hinzufügen

So fügen Sie einen Diagramm-Block hinzu:

  1. Bearbeite eine Seite oder einen Beitrag, klicke auf Block hinzufügen oder auf eine Einfügemarke und klicke dann auf Diagramm. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
  2. Öffne den Block-Editor, indem du auf das Bleistiftsymbol auf dem Block klickst.
  3. Wähle Balkendiagramm, Liniendiagramm oder Kreisdiagramm aus. Der Diagramm-Editor wird geöffnet – darin siehst du eine Vorschau des Diagramms mit Platzhalterinhalten.
Diagramm-Block-Optionen im Block-Menü.
  1. Verwende den Tab Daten oder Import / Export, um Daten hinzuzufügen.
  2. Verwende den Tab Design, um das Diagramm zu gestalten. Wenn deine Website Version 7.0 nutzt, klicke auf Anwenden, um deine Änderungen zu veröffentlichen.

Für detailliertere Anweisungen ziehen Sie bitte die folgenden Abschnitte zu Rate.

Diagramm-Block-Layouts

Hier sind Beispiele für jedes Diagramm-Block-Layout. Du kannst das Layout im Tab „Daten“ des Diagramm-Blocks ändern. Beim Auswählen eines Layouts wird dir eine Vorschau davon auf der Seite angezeigt. Möglicherweise musst du deine Daten neu formatieren, um sie optimal an das neue Layout anzupassen.

Balkendiagramme werden in der Regel verwendet, um Werte zu vergleichen oder Veränderungen im Laufe der Zeit zu verfolgen. Dieser Balkendiagrammblock zeigt den Ticketverkauf nach Standorten über einen Zeitraum von drei Monaten an. Jede Balkenfarbe repräsentiert ein anderes Jahr.Beispiel für einen Balkendiagramm-Block.

Liniendiagramme werden typischerweise verwendet, um Veränderungen im Laufe der Zeit anzuzeigen. Mit mehreren Linien können Sie Änderungen zwischen mehreren Themen vergleichen. Dieser Liniendiagramm-Block zeigt die Anmeldezahlen über einen Zeitraum von sechs Monaten. Jede Linie repräsentiert ein anderes Jahr.

Beispiel für einen Liniendiagramm-Block.

Kreisdiagramme werden in der Regel verwendet, um Umfragezahlen, Präferenzen oder Prozentsätze zu vergleichen, wobei Daten als „Stücke“ des Kuchens dargestellt werden. Dieser Kreisdiagramm-Block zeigt die beliebtesten Kuchen basierend auf Umfrageergebnissen.

Beispiel für einen Kreisdiagramm-Block.

Daten hinzufügen

Nach der Auswahl des Diagrammtyps kannst du den Tab „Import / Export“ verwenden, um Daten aus einer CSV-Datei zu importieren, oder den Tab „Daten“, um Daten manuell hinzuzufügen.

Hinweis

Du kannst bis zu 25 Zeilen und 25 Spalten hinzufügen. Nur Zahlen können eingegeben werden. Der Editor wandelt alle Dollarzeichen ($) in Nullen um.

Option 1 - Copy data from a .csv

Wenn Sie eine Tabelle mit Daten haben, können Sie diese aus einer Klartext-CSV- Datei kopieren und einfügen. Wir empfehlen diese Methode, besonders wenn viele Daten vorhanden sind und Sie mit dem Erstellen von Tabellenkalkulationen in Excel oder Google Sheets vertraut sind.

Tipp

In your spreadsheet program, use column and row headers to create labels for the chart. You’ll then open the .csv in a plain text editor since the block can’t import cells from a spreadsheet.

  1. Lassen Sie den Diagramm-Block-Editor geöffnet.
  2. In your spreadsheet program, save your data as a .csv file.
  3. Open the file in a plain text editor like Notepad or TextEdit.
  4. Markiere alles und kopiere den Text.
  5. Klicke im Block-Editor auf Import / Export.
  6. Lösche die Platzhalterdaten im Feld „Diagrammdaten“.
  7. Paste the text you copied from the .csv.
  8. Klicke auf Aktualisieren und in der daraufhin erscheinenden Mitteilung auf Bestätigen.
  9. The chart preview will refresh with new data.

Daten im Tab „Import / Export“ sollten ungefähr so aussehen:

Beispiel für das importierte Datenformat im Block-Editor.

Option 2 - Enter or edit data manually

Sie können das Diagramm von Grund auf neu erstellen, indem Sie die Zeilen einzeln im Block-Editor eingeben. Verwenden Sie diese Option, wenn Sie keine bestehenden Daten haben oder wenn das Diagramm relativ einfach sein soll. Sie können diese Schritte auch nach dem Import befolgen, um sämtliche Daten zu bearbeiten.

  1. Entfernen Sie im Tab „Daten“ des Block-Editors Platzhalterzeilen, indem Sie diese per Drag-and-Drop im erscheinenden Papierkorb ablegen.
  2. Klicke auf das Pluszeichen rechts oben, um neue Spalten und Kopfzeilen hinzuzufügen. Kreisdiagramm-Blöcke können nur über zwei Spalten verfügen.
  3. Klicke auf das Pluszeichen links unten, um neue Zeilen und Kopfzeilen hinzuzufügen.
  4. Klicken Sie in eine Zelle, um neue Daten einzugeben oder Platzhalterdaten zu ersetzen. Füllen Sie alle Zellen. Während Sie Daten eingeben, wird die Diagrammvorschau aktualisiert.

Tipp

Navigate between cells and rows with the Tab key, just like in any spreadsheet program.

  1. Aktivieren Sie X- und Y-Achsen spiegeln, um die Art und Weise zu ändern, wie Daten dargestellt werden. Wir empfehlen dies nicht für Kreisdiagramm-Blöcke.

Tipps zur Formatierung

Wie Sie Ihre Daten formatieren, hängt von der Art des verwendeten Diagramm-Blocks ab. Um mehr über das Formatieren der einzelnen Diagramme zu erfahren, befolgen Sie diese Tipps.

Jede Zeile in Balkendiagramm-Blöcken stellt einen Balken oder Gegenstand auf der X-Achse des Diagramms dar. Dies ist in der Regel für die Hauptgegenstände reserviert, die Sie vergleichen.

In Balkendiagramm-Blöcken stellt jede Zeile einen Gegenstand auf der X-Achse dar.

Jede neue Spalte stellt die Messgröße dar, die Sie zwischen den Gegenständen vergleichen. Jede neue Spalte erzeugt einen neuen vertikalen Abschnitt im Diagramm.

Um einen einfachen Vergleich zwischen den Gegenständen zu ermöglichen, fügen Sie eine Spalte hinzu, um jeweils einen Balken zu erstellen. Um mehrere Vergleiche zwischen den Gegenständen durchzuführen, fügen Sie mehrere Spalten hinzu.

Mit mehreren Spalten können Balkendiagramm-Blöcke mehrere Vergleiche zwischen Gegenständen darstellen.

Weitere Tipps

  • Es ist derzeit nicht möglich, ein gestapeltes Balkendiagramm zu erstellen.
  • Titel, Beschriftung und Legende können nicht innerhalb des Blocks verschoben werden.
  • Die Zahlen auf der Y-Achse können automatisch aufgerundet werden. Es ist nicht möglich, dies zu bearbeiten.
  • Um die Größe des Balkendiagramm-Blocks anzupassen, gehe zu Blöcke skalieren.
  • Auf Ihrer Produktivseite werden Kurzinfos beim Mouseover angezeigt, die Details zu einzelnen Datenpunkten enthalten.

Die X-Achse (erzeugt durch Zeilen) in Liniendiagramm-Blöcken wird in der Regel für Intervalle verwendet. Jede Zeile in Ihren Daten erzeugt ein neues Intervall im Diagramm.

Kurvendiagramm-Blöcke verwenden die X-Achse für Intervalle.

Die Y-Achse (erzeugt durch Spalten) wird in der Regel für den Wert verwendet, den Sie im Laufe der Zeit erfassen (z. B. Absatzzahlen, Umsatz, oder Bevölkerung). Jede Spalte in Ihren Daten erzeugt eine neue Linie im Diagramm.

Wenn Sie mehrere Linien vergleichen, fügen Sie mehrere Spalten hinzu.

Mit mehreren Spalten können Liniendiagramm-Blöcke mehrere Vergleiche zwischen Gegenständen darstellen.

Weitere Tipps

  • Es ist nicht möglich, Unsicherheiten oder Prognosen (graue oder gestrichelte Linien, die Trends vorwegnehmen) hinzuzufügen.
  • Titel, Beschriftung und Legende können nicht innerhalb des Blocks verschoben werden.
  • Die Zahlen auf der Y-Achse können automatisch aufgerundet werden. Es ist nicht möglich, dies zu bearbeiten.
  • Um die Größe von Liniendiagramm-Blöcken anzupassen, gehe zu Blöcke skalieren.
  • Auf Ihrer Produktivseite werden Kurzinfos beim Mouseover angezeigt, die Details zu einzelnen Datenpunkten enthalten.

Kreisdiagramm-Blöcke sind für den Vergleich von bis zu fünf Elementen ausgelegt. Jede Farbpalette enthält fünf Farben, bevor sie sich wiederholen.

Daten sollten nur zwei Spalten enthalten, wobei die erste Spalte ein Label enthält und eine zweite Spalte einen numerischen Wert, der diesem Label entspricht. Im folgenden Beispiel enthält die erste Spalte die Liste der Kuchen, und die zweite Spalte enthält die Anzahl der Personen, die diesen Kuchen mögen.

Der „Daten“-Tab eines Kreisdiagramm-Blocks.

Weitere Tipps

  • Wir empfehlen nicht, die X- und Y-Achse zu drehen.
  • Titel, Beschriftung und Legende können nicht innerhalb des Blocks verschoben werden.
  • Das Label für jeden Artikel ist für maximal zwei oder drei Wörter ausgelegt. Wenn Sie längere Namen oder mehr Informationen für jeden Artikel möchten, verwenden Sie einen Text-Block unterhalb des Diagramms, um die Labels ausführlicher zu erläutern.
  • Andere Texte oder Zeichen, die zu numerischen Werten in der zweiten Spalte hinzugefügt wurden, wie z. B. Prozentsymbole, erscheinen nicht auf Ihrer veröffentlichten Website.
  • Um die Größe von Kreisdiagramm-Blöcken anzupassen, gehe zu Blöcke skalieren.
  • Auf Ihrer veröffentlichten Website werden die Details der einzelnen „Stücke“ des Diagramms nur bei Mouseover angezeigt.

Das Diagramm gestalten

Im Tab „Design“ kannst du benutzerdefinierten Text hinzufügen, eine Legende anzeigen und eine Farbpalette auswählen. Um mehr über diese Designoptionen zu erfahren, sieh dir die folgende Tabelle an:

Design-Option Benutzen Sie dies, um
Diagrammtitel Fügen Sie einen Titel für das Diagramm hinzu. Wir empfehlen, diesen kurz zu halten, wie z. B. „Ticketverkäufe 2019“.

Bildunterschrift

Füge eine Beschriftung hinzu, die unterhalb des Diagramms angezeigt wird. Diese Beschriftung ist hilfreich, um Quellen, Daten, detaillierte Erklärungen und/oder Haftungsausschlüsse anzugeben.
Legende anzeigen Zeigen Sie Daten-Labels in einer Legende an.

Farbpalette

Wähle aus einer unserer vielen voreingestellten Optionen ein Farbschema für das Diagramm aus, um ein einheitliches Aussehen zu erzielen. Jede Option hat fünf Farben. Es ist derzeit nicht möglich, bestimmte Farben für Datenpunkte oder Diagrammachsen anzupassen.

Den Text gestalten

Verwende Website-Stil, um die Schriftart und Farbe des Textes des Blocks zu ändern. Wie du den Text gestaltest, hängt von der Version deiner Squarespace-Website ab.

In allen Diagrammen:

  • Titel-Schriftart – Entspricht den Einstellungen für Überschriften
  • Titelfarbe – Entspricht den Einstellungen für Überschrift (groß)
  • Titel-Größe – entspricht den Einstellungen für Überschrift 2
  • Legenden-Schriftart – Entspricht den Einstellungen für Absätze
  • Legenden-Farbe – Entspricht den Einstellungen für Absatz (mittelgroß)
  • Legenden-Größe – Entspricht den Einstellungen für Absatz 2
  • Beschriftungs-Schriftart – Entspricht den Einstellungen für Absätze und ist immer kursiv
  • Beschriftungs-Farbe – Entspricht den Einstellungen für Absatz (mittelgroß)
  • Beschriftungs-Größe – Entspricht den Einstellungen für Absatz 2

Der gesamte Diagrammtext entspricht den Anpassungen von Überschrift und Text. Die genauen Optionen variieren je nach Template.

Diagrammdaten exportieren

So sichern Sie Ihre Daten in einer CSV- Datei außerhalb von Squarespace:

  1. Öffne das Menü „Seiten“.
  2. Klicke auf der Seite oder in dem Eintrag, wo der Diagramm-Block angezeigt, auf Bearbeiten
  3. Doppelklicke auf den Diagramm-Block.
  4. Klicke auf Import / Export.
  5. Kopiere die Daten im Feld „Diagrammdaten“.
  6. Paste the data into a plain text editor.
  7. Save the file as a .csv. This converts the file into a spreadsheet.
Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.